Alicia Adell
Tables can be used to arrange data like text, images, links and other elements into rows and columns.
Tables
Styling
Basic table
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped table
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 |
Banded table
Use .table-banded to add bands to any table within the <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Bordered table
Use .table-bordered to display the vertical borders in a <table>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
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 | Laurie | Hart | @lau |
| 5 | Kristin | Poole | @kri |
| 6 | Melvin | Vega | @vega |
Contextual table
Use contextual classes to color table rows or individual cells.
.infoIndicates a neutral informative change or action.dangerIndicates a dangerous or potentially negative action.warningIndicates a warning that might need attention.successIndicates a successful or positive action.activeApplies the hover color to a particular row or cell
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
Dark background
If you want to, you can place a table on a dark background
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table hover
Add .table-hover to enable a hover state on table rows within a <tbody>.
| Status | First Name | Last Name | Summary | Actions |
|---|---|---|---|---|
 |
Abbey | Johnson | Fuisset delicatissimi duo, qui ut animal noluisse erroribus. | |
 |
Alex | Nelson | Ea eum veniam audire. Dicant vituperata consequuntur. | |
 |
Mary | Peterson | Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. |
