Overview
Due to the widespread use of < table >
elements across
third-party widgets like calendars and date pickers, Bootstrap’s tables are
opt-in. Add the base class .table
to any
< table >
, then extend with our optional modifier classes or
custom styles. All table styles are not inherited in Bootstrap,
meaning any nested tables can be styled independent from the parent.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Variants
Use contextual classes to color tables, table rows or individual cells.
Class | Heading | Heading |
---|---|---|
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 |
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 |
These classes can also be added to table variants:
# | 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 |
Bordered tables
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 |
Tables without borders
Add .table-borderless
for a table without borders.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |