Loading...
Default Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark layout

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark layout

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Hoverable Rows
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark layout

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Responsive Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table Head Options
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark layout

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark layout

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table Sizing

Add class .table-sm to .table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Contextual Table

Add class .table-{state} to any row

Class First Last
Primary Mark Otto
Secondary Jacob Thornton
Success Larry the Bird Otto
Danger Larry the Bird Thornton
Warning Larry the Bird Otto
Info Larry the Bird Thornton