Tables
The tables are "opt-in". So you need to use the class .table.
See the several examples.
Basic table
A table with minimal styles
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</table>
Dark table
You can also invert the colors .table-dark.
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</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-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</table>
Striped rows
Use .table-striped to add zebra-striping.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</table>
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</table>
Hoverable rows
Add .table-hover to enable a hover state on table rows within a
<tbody>.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Middlename</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem</td>
<td>Quisque</td>
<td>Amet</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ipsum</td>
<td>Rutrum</td>
<td>Tellus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lectus</td>
<td>Nulla</td>
<td>Tempor</td>
</tr>
</tbody>
</table>
Contextual classes
Use contextual classes to color table rows or individual cells.
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">Active</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
View the complete table documentation at Bootstrap website.