Bootstrap 5 Tables

Bootstrap 5 includes table classes that assist with building consistently styled and responsive tables.

Bootstrap doesn't provide any default styling for tables. In other words, Bootstrap's table styles are opt-in. To use Bootstrap's styles for tables, use Bootstrap's .table class, then apply any additional modifier classes or custom styles as required.

Also, Bootstrap's table styles are not inherited, meaning any nested tables can be styled independent from the parent.

Basic Table

For a basic table with lightly padded cells and horizontal dividers, apply Bootstrap's .table class to the <table> element.

Dark Table

You can use the .table-dark class to invert the colors so that it has light text on a dark background.

Striped Table

For alternating background colors on the rows, add Bootstrap's .table-striped class (while keeping the .table class in place).

Bordered Table

For borders all around the table, use Bootstrap's .table-bordered class (while keeping the .table class in place).

Hover Rows

To achieve that "hover" effect when mousing over the table rows, use Bootstrap's .table-hover class (while keeping the .table class in place).

Small/Condensed Table

If you find a table has too much padding, you can half the padding by using Bootstrap's .table-sm class (while keeping the .table class in place).

Contextual Classes

You can apply color to individual rows or cells by using Bootstrap's contextual classes.

The 5 contextual classes are: .table-active, .table-success, .table-info, .table-warning, and .table-danger.

This can also be applied at the table level:

Responsive Tables

Responsive tables automatically create horizontal scrollbars when viewed on devices smaller than a given breakpoint.

To create a responsive table, enclose the table in a <div> element that has the .table-responsive class (or one of the .table-responsive-* classes) applied.

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>

The .table-responsive-* classes can be used to specify a specific breakpoint. They are .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl and .table-responsive-xxl.

From that breakpoint and up, the table will behave normally and not scroll horizontally.