Tables

Documentation and examples for opt-in styling of tables.

On this page

Overview

Add the base class .Table to any Table, then extend with our optional modifier classes or custom styles.

All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

Using the most basic table markup, here's how Table component-based tables look in Bootstrap.

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Variants

Use theme attribute to color tables, table rows or individual cells.

Class Heading Heading
Default CellCell
Primary CellCell
Secondary CellCell
Success CellCell
Danger CellCell
Warning CellCell
Info CellCell
Light CellCell
Dark CellCell
vue

Accented tables

Striped rows

Use striped attribute to add zebra-striping to any table row within the Tbody component.

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

These classes can also be added to table variants:

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Hoverable rows

Add hover to enable a hover state on table rows within a Tbody component.

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

These hoverable rows can also be combined with the striped variant:

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Active tables

Highlight a table row or cell by adding a active class.

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Table borders

Bordered tables

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

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Border color utilities can be added to change colors:

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Tables without borders

Add borderless attribute for a table without borders.

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Small tables

Add small attribute to make any Table component more compact by cutting all cell padding in half.

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Vertical alignment

Table cells of Thead are always vertical aligned to the bottom.

Table cells in Tbody inherit their alignment from Table and are aligned to the top by default.

Use the vertical align attribute to re-align where needed.

Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
vue

Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

# First Last Handle
1 MarkOtto@mdo
Header Header Header
A FirstLast
B FirstLast
C FirstLast
3 Larrythe Bird@twitter
vue

Anatomy

Table head

Similar to tables and dark tables, use the modifier attributes light or dark to make Theads appear light or dark gray.

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Table foot

# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
# First Last Handle
vue

Captions

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 Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

You can also put the Caption on the top of the table with caption="top" attribute.

List of users
# First Last Handle
1 MarkOtto@mdo
2 JacobThornton@fat
3 Larry the Bird @twitter
vue

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease.

Make any table responsive across all viewports by wrapping a Table cp, with responsive attribute.

Or, pick a maximum breakpoint with which to have a responsive table up to by using responsive={sm|md|lg|xl|xxl}.

Always responsive

Across every breakpoint, use responsive attrobute for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 CellCellCellCellCellCellCellCellCell
2 CellCellCellCellCellCellCellCellCell
3 CellCellCellCellCellCellCellCellCell
vue

Breakpoint specific

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

These tables may appear broken until their responsive styles apply at specific viewport widths.

# Heading Heading Heading Heading Heading Heading Heading Heading
1 CellCellCellCellCellCellCellCell
2 CellCellCellCellCellCellCellCell
3 CellCellCellCellCellCellCellCell
vue
On this page