Basic example
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table">
...
</table>
Striped rows
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry |
the Bird |
@twitter |
<table class="table table-striped">
...
</table>
Bordered table
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| Mark |
Otto |
@TwBootstrap |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-bordered">
...
</table>
Hover rows
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-hover">
...
</table>
Condensed table
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
<table class="table table-condensed">
...
</table>
Contextual classes
| # |
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 |
| 7 |
Column content |
Column content |
Column content |
| 8 |
Column content |
Column content |
Column content |
| 9 |
Column content |
Column content |
Column content |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Responsive tables
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| # |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
Table heading |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>