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 |