NORMAL TABLES
BASIC TABLES Basic example without any additional modification classes
| # | FIRST NAME | LAST NAME | USERNAME |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | Jellybean | @lajelly |
| 5 | Larry | Kikat | @lakitkat |
STRIPED ROWS
Use .table-striped to add zebra-striping to any table row within the <tbody>
| # | FIRST NAME | LAST NAME | USERNAME |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | Jellybean | @lajelly |
| 5 | Larry | Kikat | @lakitkat |
BORDERED TABLE
Add .table-bordered for borders on all sides of the table and cells.
| # | FIRST NAME | LAST NAME | USERNAME |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | Jellybean | @lajelly |
| 5 | Larry | Kikat | @lakitkat |
HOVER ROWS
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | FIRST NAME | LAST NAME | USERNAME |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | Jellybean | @lajelly |
| 5 | Larry | Kikat | @lakitkat |
CONDENSED TABLE
Add .table-condensed to make tables more compact by cutting cell padding in half.
| # | FIRST NAME | LAST NAME | USERNAME |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | Jellybean | @lajelly |
| 5 | Larry | Kikat | @lakitkat |
CONTEXTUAL CLASSES Use contextual classes to color table rows or individual cells.
| # | FIRST NAME | LAST NAME | USERNAME |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | Jellybean | @lajelly |
| 5 | Larry | Kikat | @lakitkat |
WITH MATERIAL DESIGN COLORS
You can use material design colors which examples are .bg-pink
| # | FIRST NAME | LAST NAME | USERNAME |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | Jellybean | @lajelly |
| 5 | Larry | Kikat | @lakitkat |