Basic Tables

Simple Table

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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Table head options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Striped rows

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Bordered table

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

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter

Hoverable rows

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter