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

Table With Outside Padding

Table Without Outside Padding

Table Header

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

Striped rows

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

Boredered Table

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

Hoverable Rows

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

Contextual Table

Use contextual classes to color table rows or individual cells.

Table With Caption

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Breakpoint Specific

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.