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.

Prior to the Beta 2 release, these required the .table-inverse class. This class has been replaced with .table-dark in Beta 2.

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.

Light

Use the .thead-light class.

Dark

Use the .thead-dark class.

New in Bootstrap 4

Table head styles are new in Bootstrap 4.

Prior to the Beta 2 release, these required the .table-default class and the .table-dark class. These classes have been replaced with .table-light and .table-dark in Beta 2.

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, add the .table-responsive class (or one of the .table-responsive-* classes) to the <table> element.

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.

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 allows you to add the .table-responsive and .table-responsive-* classes to the actual <table> element.

Bootstrap 3 tables required that you add that class to a parent <div> element.

Also, Bootstrap 3 didn't have the .table-responsive-* classes.