Table Elements page header description goes here...
Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
Default Table
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Dark 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 .thead-light
or .thead-dark
to make <thead>
s appear light or dark gray.
Dark Header
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Light Header
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
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 |
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 |
Borderless table
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
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 |
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 |
Contextual classes
Use contextual classes to color table rows or individual cells.
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 |
Light | Cell | Cell |
Dark | Cell | Cell |
Warning | Cell | Cell |
Info | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
Dark | Cell | Cell |
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}
.
# | 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 |