Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Bootstrap Tables documentationBasic example
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- End Table -->
Thead light
Use the modifier classes .thead-light to make <thead>s appear light.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- End Table -->
Table thead bordered
Add border to the top of the thead with the .thead-light class where .table-borderless class is used.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<table class="table table-borderless table-thead-bordered">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- End Table -->
Table nowrap
.table-nowrap fixes horizontal scrollbar/alignment in responsive.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<div class="div class="table-responsive"">
<table class="table table-nowrap">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
Table align middle
Vertically center align tbody items with the .table-align-middle class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark Markus |
Otto | @mdo |
| 2 | Jacob Jacy |
Thornton | @fat |
| 3 | Larry Larry |
the Bird |
<!-- Table -->
<div class="div class="table-responsive"">
<table class="table table-align-middle">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark<br>Markus</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob<br>Jacy</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry<br>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
Table text center
Center align items with the .table-text-center class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<div class="div class="table-responsive"">
<table class="table table-text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
Table text end
Right align items with the .table-text-end class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<div class="div class="table-responsive"">
<table class="table table-text-end">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
Sizes
Use .table-lg class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<table class="table table-lg">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- End Table -->
Use .table-sm class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Table -->
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- End Table -->
Table vertical border striped
Use .table-vertical-border-striped class.
| Professional $0/mon | Team Hot $60/mon | Enterprise Custom | |
|---|---|---|---|
| Cross-platform UI toolkit | |||
| 14-days free trial | |||
| No user limit | |||
| Long-term support | |||
| Email support | Add-on available | ||
| Developer tools | |||
| Removal of Front branding | |||
| Active maintenance & support | |||
| Data storage for 365 days | Add-on available | ||
<!-- Table -->
<table class="table table-nowrap table-vertical-border-striped">
<thead class="table-text-center">
<tr>
<th scope="col" style="width: 40%;"></th>
<th scope="col" style="width: 20%;">
<span class="d-block">Professional</span>
<span class="d-block text-muted small">$0/mon</span>
</th>
<th scope="col" style="width: 20%;">
<span class="d-block">Team <span class="badge bg-warning text-dark rounded-pill ms-1">Hot</span></span>
<span class="d-block text-muted small">$60/mon</span>
</th>
<th scope="col" style="width: 20%;">
<span class="d-block">Enterprise</span>
<span class="d-block text-muted small">Custom</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-dark">Cross-platform UI toolkit</th>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td></td>
</tr>
<tr>
<th scope="row" class="text-dark">14-days free trial</th>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">No user limit</th>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Long-term support</th>
<td></td>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Email support</th>
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Developer tools</th>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td></td>
</tr>
<tr>
<th scope="row" class="text-dark">Removal of Front branding</th>
<td></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Active maintenance & support</th>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark">Data storage for 365 days</th>
<td></td>
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
</tr>
<tr>
<th scope="row" class="text-dark"></th>
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
<td><button type="button" class="btn btn-primary btn-sm btn-transition">Contact us</button></td>
</tr>
</tbody>
</table>
<!-- End Table -->