Basic Table
Basic example without any optional modifier classes.
<table class="table">
...
</table>You can also invert the colors—with light text on dark backgrounds—with .table-dark.
<table class="table table-dark">
...
</table>Table head options
Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.
<table class="table">
<thead class="thead-light">
...
</thead>
<tbody>
...
</tbody>
</table>
<table class="table">
<thead class="thead-dark">
...
</thead>
<tbody>
...
</tbody>
</table>Striped rows
Add zebra-striping to any table row within the tbody.
<table class="table table-striped">
...
</table>Bordered table
Tables with borders on all possible sides of the Table and Cells.
<table class="table table-bordered">
...
</table>Hoverable rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
<table class="table table-hover">
...
</table>Small table
Add .table-sm to make tables more compact by cutting cell padding in half.
<table class="table table-sm">
...
</table>Contextual classes
Use contextual classes to color table rows or individual cells.
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>