Tables

  1. Home
  2. Shortcodes
  3. Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

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 Name Last Name Username Status
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Dark

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

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

Table Striped

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

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

Table Bordered

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

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

Table Hover

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

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

Table Small

Add .table-sm to make tables more compact by cutting cell padding in half.

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

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

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

Table Responsive

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

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell

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.

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