Bootstrap 4 Tables

Bootstrap 4 added some new table classes that assist with building consistently styled and responsive tables.

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.

New in Bootstrap 4

Dark tables are new in Bootstrap 4.

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).

Table Head Styles

You can add a background color to the <thead> element by using either .thead-default or .thead-inverse.


Use the .thead-light class.


Use the .thead-dark class.

New in Bootstrap 4

Table head styles are new in Bootstrap 4.

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).

Bootstrap 4 vs Bootstrap 3

Note that, while Bootstrap 4 uses .table-sm to condense a table, Bootstrap 3 uses .table-condensed. Both cut cell padding in half.

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.

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 doesn't use the .table- prefix for its contextual classes.

For example, Bootstrap 3 uses .active whereas Bootstrap 4 uses .table-active. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger).

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.

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

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

The .table-responsive class is equivalent to .table-responsive-md.