Basic Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark Table
You can also invert the color 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 Head Options
Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
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 Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark table
# First Last Handle
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 Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped Rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Borderless Table
Add .table-borderless for a table without borders.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Contextual Classes
Use contextual classes to color table rows or individual cells.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Individual cells
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
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}.
# First Last Address Email Mobile Birthday Handle
1 Mark Otto 4588 Bastin Drive, Philadelphia, PA - 19108 ChristopherASpalding@jourrapide.com 626-673-9649 Nov 26, 1972 @mdo
2 Jacob Thornton 3914 Lindale Avenue, San Francisco, CA - 94107 JosephAPorter@jourrapide.com 978-433-6848 July 21, 1998 @fat
3 Larry the Bird 3133 Elk Creek Road, Social Circle, GA - 30279 CherylJJohnson@armyspy.com 515-225-4493 Oct 15, 1985 @twitter