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.

Inverse Table

You can invert the colors of the table by using the .table-inverse class.

New in Bootstrap 4

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

Default

Use the .thead-default class.

Inverse

Use the .thead-inverse 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 small devices or viewports (under 768 pixels).

To create a responsive table, add the .table-responsive class to the <table> element.

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 allows you to add the .table-responsive class to the actual <table> element.

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