.table
-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables
will be styled in the same manner as the parent.# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<thead>
s appear light.# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
.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 |
.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 |
.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 |
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 |
<caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand
what it’s about and decide if they want to read it.# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
.table
with
.table-responsive
. Or, pick a maximum breakpoint with which to have a responsive table up to by using
.# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
# | Table header | Table header | Table header | Table header | Table header | Table header |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
.table-responsive(-sm|-md|-lg|-xl)
as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the
table will behave normally and not scroll horizontally.# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |