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 |