Tables
The .table class adds basic styling to a table.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table Head Options
Similar to tables and dark tables, use the modifier classes Add Add A You can also invert the colors—with light text on dark backgrounds—with Use Add Use contextual classes to color table rows or individual cells. Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles. Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .thead-light or .thead-dark to make 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 Borderless table
.table-borderless for a table without borders.# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter .table-borderless can also be used on dark tables.# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Small table
.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 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Captions
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Table Dark
.table-dark.# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Striped Rows
.table-striped to add zebra-striping to any table row within the .# 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
.table-hover to enable a hover state on table rows within a .# 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 Contextual classes
Class Heading Heading Active Cell Cell Default Cell Cell Primary Cell Cell Secondary Cell Cell Success Cell Cell Danger Cell Cell Warning Cell Cell Info Cell Cell # Heading Heading 1 Cell Cell 2 Cell Cell 3 Cell Cell 4 Cell Cell 5 Cell Cell 6 Cell Cell 7 Cell Cell 8 Cell Cell 9 Cell Cell Responsive tables
.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}.# Heading Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell Cell