Basic tables
Just add the base class .table to any table and extend with custom styles or our various modifier classes.
All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Mackerel |
@mmackerel |
| 2 |
Jacob |
Jellyfish |
@jjelly |
| 3 |
Marty |
Monkfish |
@martythemonk |
<![CDATA[
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Mackerel</td>
<td>@mmackerel</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Jellyfish</td>
<td>@jjelly</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Marty</td>
<td>Monkfish</td>
<td>@martythemonk</td>
</tr>
</tbody>
</table>
</div>
]]>
Tables with striped rows
Use .table-striped to add zebra-striping to any table row within the tbody.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Mackerel |
@mmackerel |
| 2 |
Jacob |
Jellyfish |
@jjelly |
| 3 |
Marty |
Monkfish |
@martythemonk |
<![CDATA[
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Mackerel</td>
<td>@mmackerel</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Jellyfish</td>
<td>@jjelly</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Marty</td>
<td>Monkfish</td>
<td>@martythemonk</td>
</tr>
</tbody>
</table>
</div>
]]>
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Mackerel |
@mmackerel |
| 2 |
Jacob |
Jellyfish |
@jjelly |
| 3 |
Marty |
Monkfish |
@martythemonk |
<![CDATA[
<div class="table-responsive">
<table class="table table-responsive-xl table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Mackerel</td>
<td>@mmackerel</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Jellyfish</td>
<td>@jjelly</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Marty</td>
<td>Monkfish</td>
<td>@martythemonk</td>
</tr>
</tbody>
</table>
</div>
]]>
Tables with hoverable rows
Add .table-hover to enable a hover state on table rows within a tbody.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Mackerel |
@mmackerel |
| 2 |
Jacob |
Jellyfish |
@jjelly |
| 3 |
Marty |
Monkfish |
@martythemonk |
<![CDATA[
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Mackerel</td>
<td>@mmackerel</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Jellyfish</td>
<td>@jjelly</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Marty</td>
<td>Monkfish</td>
<td>@martythemonk</td>
</tr>
</tbody>
</table>
</div>
]]>
