Clarity - Responsive Minimalist Bootstrap 4 HTML Template

General

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Show Code

<table class="table">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

Dark Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Show Code

<table class="table table-dark">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

Table Head Options

#	First
1	Mark
2	Jacob

Show Code

<table class="table">
    <thead class="thead-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

#	First
1	Mark
2	Jacob

Show Code

<table class="table">
    <thead class="thead-light">
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

Striped Rows

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-striped table-dark">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

Bordered

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-bordered">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-bordered table-dark">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

Borderless

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-borderless">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-borderless table-dark">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

Hoverable Rows

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-hover">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-borderless table-dark">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

Small Table

#	First
1	Mark
2	Jacob

Show Code

<table class="table table-sm">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>

Purchase $8.00 only!

Do you like our template? Updates, new pages and widgets every week.

Purchase Cleathin