Bootstrap Table layout with some custom color,
you can find the full bootstrap table documentation
here
Basic table
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 |
Bordered table
Add .table-bordered for borders
on all sides of the table and cells
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Condensed table
Add .table-condensed 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 |
Contextual cell table
Use contextual classes to color table cells
.active
.success
.info
.warning
.danger
| First Name | Last Name | Username |
|---|---|---|
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry | the Bird | |
| Mark | Otto | @mdo |
| Jacob | Thornton | @fat |
| Larry | the Bird |
Striped row table
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 | Larry | the Bird |
Hover row table
Add .table-hover to enable a basic bootstrap hover
state on table rows. Add .an-table-hover to enable hover
color to match with template color with transparency.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Contextual row table
Use contextual classes to color table rows
.active
.success
.info
.warning
.danger
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 5 | Mark | Otto | @mdo |
Responsive table
Create responsive tables by wrapping any .table
in .table-responsive to make them scroll horizontally on
small devices (under 768px). When viewing on anything larger than 768px wide,
you will not see any difference in these tables.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |