Download App
Tables
Basic Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Otto | |
| 4 | Wilson | Thornton | @fat |
| 5 | Alexander | Thornton | @fat |
Variants Table
Use contextual classes to color tables, table rows or individual cells.
| Class | Heading | Heading |
|---|---|---|
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
Striped Table
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Otto | |
| 4 | Wilson | Thornton | @fat |
| 5 | Alexander | Thornton | @fat |
Hoverable Table
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Otto | |
| 4 | Wilson | Thornton | @fat |
| 5 | Alexander | Thornton | @fat |
Datatable
| Id | User | Age | Address | Progress | Status |
|---|---|---|---|---|---|
| US-0001 |  Molly |
45 | 70 Bowman St. South Windsor, CT 06074 |
|
Not Active |
| US-0011 |  Brian |
35 | 123 6th St. Melbourne, FL 32904 |
|
Active |
| US-0045 |  Julia |
42 | 4 Shirley Ave. West Chicago, IL 60185 |
|
Active |
| US-0030 |  Sonia |
25 | 123 6th St. Melbourne, FL 32904 |
|
Not Active |
| US-0078 |  Adam H |
18 | 4 Shirley Ave. West Chicago, IL 60185 |
|
Not Active |
| US-0098 |  Alexander |
38 | 123 6th St. Melbourne, FL 32904 |
|
Active |
| US-0999 |  Gabrielle |
65 | 4 Shirley Ave. West Chicago, IL 60185 |
|
Active |
| US-0101 |  Grace |
40 | 4 Shirley Ave. West Chicago, IL 60185 |
|
Active |
| US-1001 |  Ryan |
34 | 70 Bowman St. South Windsor, CT 06074 |
|
Not Active |
| US-1101 |  Christian |
21 | 123 6th St. Melbourne, FL 32904 |
|
Active |