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-bordered for 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-striped to 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-responsive Or, 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 |