Table

  1. Tables
  2. / Basic Table

Basic example

For basic styling—light padding and only horizontal dividers—use the class table.

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

Dark table

For dark styling use the classes table and table-dark.

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

Table head options

Use one of two modifier classes thead-default or thead-dark to make thead appear light or dark.

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

Table head options

Use one of two modifier classes to make thead appear light or dark gray.

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

Bordered table

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

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

Hoverable rows

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

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

Small table

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry The Bird @twitter
4 Ann Nelson @nel
5 Jonathan Sevian @sev
6 Richard Anderson @rich

Responsive table

Create responsive tables by adding table-responsive to any table to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# first name last name user name email office age
1 Mark Otto @mdo [email protected] Tokyo 21
2 Jacob Thornton @fat [email protected] London 18
3 Jonathan Sevian @twitter [email protected] San Francisco 22

Contextual tables

Use contextual classes to color table rows or individual cells.

Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content