Just add the base class .table
and
<table>
.
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
You can also invert the colors—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 |
Similar to tables and dark tables, use the modifier classes .table-light
or .table-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 |
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 |
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
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 |
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
Add .table-borderless
for a table without borders. .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 |
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.
# |
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 |
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 |