Table
Simple Table
Using the most basic table markup, here’s how .table based tables look in Bootstrap.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
| 5 | Samantha May | Junior Technical Author | $43,198 |
Striped Rows
Use .table-stripedto add zebra-striping to any table row within the .tbody.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
| 5 | Samantha May | Junior Technical Author | $43,198 |
Bordered Table
Use .table-borderedto add zebra-striping to any table row within the .tbody.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
| 5 | Samantha May | Junior Technical Author | $43,198 |
Hoverable Rows Table
Use .table-hoverto add zebra-striping to any table row within the .tbody.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
| 5 | Samantha May | Junior Technical Author | $43,198 |
Borderless Table
Use .table-borderlessto add zebra-striping to any table row within the .tbody.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
Small Table
Add .table-sm to make any .table more compact by cutting all cell padding in half.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
| 5 | Samantha May | Junior Technical Author | $43,198 |
Nested Table
Border styles, active styles, and table variants are not inherited by nested tables.
| ID | Name | Position | Salary | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 | ||||||||||||||||||||
|
|||||||||||||||||||||||
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 | ||||||||||||||||||||
| 4 | Cedric Kelly | Accountant | $234,100 | ||||||||||||||||||||
| 5 | Samantha May | Junior Technical Author | $43,198 | ||||||||||||||||||||
Contextual Table
Use contextual classes to color tables, table rows or individual cells.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Gavin Gibson | Account manager | $230,540 |
| 4 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 5 | Cedric Kelly | Accountant | $234,100 |
| 6 | Cedric Kelly | Accountant | $234,100 |
| 7 | Cedric Kelly | Accountant | $234,100 |
| 8 | Cedric Kelly | Accountant | $234,100 |
| 9 | Cedric Kelly | Accountant | $234,100 |
Table head
Similar to tables and dark tables, use the modifier classes .table-primary or .table-dark to make <thead>
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
Table Dark
Use .table-darkto add zebra-striping to any table row within the .tbody.
| ID | Name | Position | Salary |
|---|---|---|---|
| 1 | Joan Powell | Associate Developer | $450,870 |
| 2 | Gavin Gibson | Account manager | $230,540 |
| 3 | Julian Kerr | Senior Javascript Developer | $55,300 |
| 4 | Cedric Kelly | Accountant | $234,100 |
