Tables
Documentation and examples for styling tables.
Default style
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table">
<thead class="table-light">
<tr>
<th class="border-0" scope="col">#</th>
<th class="border-0 text-uppercase" scope="col">First</th>
<th class="border-0 text-uppercase" scope="col">Last</th>
<th class="border-0 text-uppercase" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
...
</tbody>
</table>
Color table
Change the color of the table using .table-{color}
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-primary">
<thead>
<tr>
<th scope="col">#</th>
<th class="text-uppercase" scope="col">First</th>
<th class="text-uppercase" scope="col">Last</th>
<th class="text-uppercase" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
...
</tbody>
</table>