Basic Tables

All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

Simple Table

For basic styling add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse Table

You can also invert the colors—with light text on dark backgrounds—with .table-inverse.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table head options

All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

Light Table Head

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light gray.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark Table Head

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear Dark gray.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped rows

All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

Striped rows Light

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

Striped rows Inverse

Use .table-striped and .table-niverse to add zebra-striping to any table row and inverse styling within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

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

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

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

Responsive tables

Create responsive tables by adding .table-responsive to any .table to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter