Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Examples
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables
to be
opt-in. Just add the base class
.table to any
<table>, then extend with custom styles or our various included modifier classes.
Using the most basic table markup, here’s how
.table-based tables look in Bootstrap.
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 |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<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>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>
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table table-dark">
<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>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
Similar to tables and dark tables, use the modifier classes
.thead-light or
.thead-dark to make
<thead>s appear light or dark gray.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table">
<thead class="thead-dark">
<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>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 class="table">
<thead class="thead-light">
<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>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>
Striped rows
Use
.table-striped to add zebra-striping to any table row within the
<tbody>.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<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>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>
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table table-striped table-dark">
<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>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>
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Mark |
Otto |
@TwBootstrap |
| 3 |
Jacob |
Thornton |
@fat |
| 4 |
Larry the Bird |
@twitter |
<table class="table 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>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Mark |
Otto |
@TwBootstrap |
| 3 |
Jacob |
Thornton |
@fat |
| 4 |
Larry the Bird |
@twitter |
<table class="table table-bordered table-dark">
<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>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Hoverable rows
Add
.table-hover to enable a hover state on table rows within a
<tbody>.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<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>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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-hover table-dark">
<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>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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Small table
Add .table-sm to make tables more compact by cutting cell padding in half.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-sm">
<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>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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-sm table-dark">
<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>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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Contextual classes
Use contextual classes to color table rows or individual cells.
| Type |
Column heading |
Column heading |
Column heading |
| Active |
Column content |
Column content |
Column content |
| Default |
Column content |
Column content |
Column content |
| Primary |
Column content |
Column content |
Column content |
| Secondary |
Column content |
Column content |
Column content |
| Success |
Column content |
Column content |
Column content |
| Danger |
Column content |
Column content |
Column content |
| Warning |
Column content |
Column content |
Column content |
| Info |
Column content |
Column content |
Column content |
| Light |
Column content |
Column content |
Column content |
| Dark |
Column content |
Column content |
Column content |
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.
| # |
Column heading |
Column heading |
Column heading |
| 1 |
Column content |
Column content |
Column content |
| 2 |
Column content |
Column content |
Column content |
| 3 |
Column content |
Column content |
Column content |
| 4 |
Column content |
Column content |
Column content |
| 5 |
Column content |
Column content |
Column content |
| 6 |
Column content |
Column content |
Column content |
| 7 |
Column content |
Column content |
Column content |
| 8 |
Column content |
Column content |
Column content |
| 9 |
Column content |
Column content |
Column content |
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies
– such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g.
the visible text), or is included through alternative means, such as additional text hidden with the
.sr-only class.
Captions
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
List of users
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table">
<caption>List of users</caption>
<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>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>
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding
.table-responsive class on
.table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding
.table-responsive{-sm|-md|-lg|-xl}.
Vertical clipping/truncation
Responsive tables make use of
overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown
menus and other third-party widgets.
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
<table class="table table-responsive">
...
</table>
Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
<table class="table table-responsive-sm">
...
</table>
<table class="table table-responsive-md">
...
</table>
<table class="table table-responsive-lg">
...
</table>
<table class="table table-responsive-xl">
...
</table>