Basic Tables
Basic example
Add .table to table to get default table
| id | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Bordered table
Add .table .table-bordered to table to get table with borders.
| id | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Contextual classes
There available 5 classes: active, success, info, warning, danger. Add it to TR tag.
| id | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 3 | Larry | the Bird | |
| 3 | Larry | the Bird |
Striped rows
Add class .table-striped to table to get table striped rows.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Hover rows
Add class .table-hover to table to highlight row on hover.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Condensed table
Add class .table-hover to table to get condensed table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table in panel
Add class .panel-body-table to panel-body to remove paddings in panel and borders in table.
| id | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Responsive tables
| id | name | status | amount | date | actions |
|---|---|---|---|---|---|
| 1 | John Doe | New | $430.20 | 24/09/2014 | |
| 2 | Dmitry Ivaniuk | Pending | $1,351.00 | 23/09/2014 | |
| 3 | Nadia Ali | In Queue | $2,621.00 | 22/09/2014 |