Basic Tables
Basic Table
Add class .table
| # | First | Last | Handle | Tag |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | Primary |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success |
Bordered table
Add .table .table-borderedfor borders on all sides of the table and cells.
| # | First | Last | Handle | Tag |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | Primary |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success |
Striped table
Add .table .table-stripedto add zebra-striping to any table row within the <tbody>.
| # | First | Last | Handle | Tag |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | Primary |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success | |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success |
Responsive table
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table .table-responsiveOr,pick a maximum breakpoint with which to have a responsive table up to by using.table-responsive{-sm|-md|-lg|-xl}.
| # | First | Last | Handle | Tag |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | Primary |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success | |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success |
Contextual classes
Use classes
(.table-active,.table-success,.table-info,.table-warning,.table-danger)to color table rows or individual cells
| # | First | Last | Handle | Tag |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | Primary |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success | |
| 2 | Jacob | Thornton | @fat | Secondary |
| 3 | Larry | the Bird | Success | |
| 3 | Larry | the Bird | Success | |
| 3 | Larry | the Bird | Success | |
| 3 | Larry | the Bird | Success | |
| 3 | Larry | the Bird | Success |