{{'Basic Tables'|translate}}

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

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

{{'Table Inverse'|translate}}

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

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

{{'Table Head'|translate}}

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray. One is .thead-default and second is .thead-inverse

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

{{'Striped Rows'|translate}}

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

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

{{'Bordered Table'|translate}}

Add .table-bordered for borders on all sides of the table and cells.

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

{{'Hoverable Table'|translate}}

Add .table-hover to enable a hover state on table rows within a <tbody>.

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

{{'Contextual Table'|translate}}

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content