@@include('./partials/topbar.html', {"pagetitle": "Basic Tables"})
@@include('./partials/left-sidebar.html')
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Your awesome text goes here.Your awesome text goes here.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Use one of two modifier classes to make <thead>s appear light or dark gray.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Use one of two modifier classes to make <thead>s appear light or dark gray.
| # |
First Name |
Last Name |
Username |
| 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 Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Mark |
Otto |
@TwBootstrap |
| 4 |
Larry |
the Bird |
@twitter |
Add .table-bordered for borders on all sides of the table and cells.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Mark |
Otto |
@TwBootstrap |
| 3 |
Jacob |
Thornton |
@fat |
| 4 |
Larry the Bird |
@twitter |
Create responsive tables by wrapping any
.table in
.table-responsive to make them scroll horizontally on small devices (under 768px).
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
Add .table-sm to make tables more compact by cutting cell padding in half.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
| 4 |
Column content |
Column content |
Column content |
| 5 |
Column content |
Column content |
Column content |
Use contextual classes to color table rows or individual cells.
| # |
Column heading |
Column heading |
Column heading |
| 1 |
Column content |
Column content |
Column content |
| 2 |
Column content |
Column content |
Column content |
| 3 |
Column content |
Column content |
Column content |
| 4 |
Column content |
Column content |
Column content |
| 5 |
Column content |
Column content |
Column content |
| 6 |
Column content |
Column content |
Column content |
| 7 |
Column content |
Column content |
Column content |
| 8 |
Column content |
Column content |
Column content |
| 9 |
Column content |
Column content |
Column content |
Use contextual classes to color table rows or individual cells.
| # |
Column heading |
Column heading |
Column heading |
| 1 |
Column content |
Column content |
Column content |
| 2 |
Column content |
Column content |
Column content |
| 3 |
Column content |
Column content |
Column content |
| 4 |
Column content |
Column content |
Column content |
| 5 |
Column content |
Column content |
Column content |
| 6 |
Column content |
Column content |
Column content |
| 7 |
Column content |
Column content |
Column content |
| 8 |
Column content |
Column content |
Column content |
| 9 |
Column content |
Column content |
Column content |
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
Your awesome text goes here.Your awesome text goes here.
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
@@include('./partials/footer.html')