This month's report will be prepared.
TodayAn email will be sent to the customer.
TodayThe meeting will be held.
YesterdayConversation with users.
YesterdayPayment refund will be made to the customer.
20 min agoPayment form will be activated.
20 min agoSigned in with a different device.
YesterdayYour billing information is not active.
YesterdayYour subscription has expired.
TodayYour storage space is running low
TodayDocumentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Use contextual classes to color tables, table rows or individual cells.
Class | Heading | Heading |
---|---|---|
Default | Cell | Cell |
Primary | Cell | Cell |
Secondary | Cell | Cell |
Success | Cell | Cell |
Danger | Cell | Cell |
Warning | Cell | Cell |
Info | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Use .table-striped
to add zebra-striping to any table row within the
<tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-striped">
...
</table>
These classes can also be added to table variants:
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-dark table-striped">
...
</table>
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-success table-striped">
...
</table>
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-hover">
...
</table>
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-dark table-hover">
...
</table>
These hoverable rows can also be combined with the striped variant:
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-striped table-hover">
...
</table>
Highlight a table row or cell by adding a .table-active
class.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table">
<thead>
...
</thead>
<tbody>
<tr class="table-active">
...
</tr>
<tr>
...
</tr>
<tr>
<th>3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Add .table-bordered
for borders on all sides of the table and cells.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-bordered">
...
</table>
Border color utilities can be added to change colors:
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-bordered border-primary">
...
</table>
Add .table-borderless
for a table without borders.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-borderless">
...
</table>
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-dark table-borderless">
...
</table>
Add .table-sm
to make any .table
more compact by cutting all cell
padding
in half.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table table-sm">
...
</table>
Similar to tables and dark tables, use the modifier classes .table-light
or .table-dark
to make <thead>
s appear light or dark gray.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table">
<thead class="table-light">
...
</thead>
<tbody>
...
</tbody>
</table>
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table">
<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird | |
Footer | Footer | Footer | Footer |
<table class="table">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
A <caption>
functions like a heading for a table. It helps users with screen readers
to find a table and understand what it’s about and decide if they want to read it.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
You can also put the <caption>
on the top of the table with .caption-top
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird | the Bird |
<table class="table caption-top">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Across every breakpoint, use .table-responsive
for horizontally scrolling tables.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
For mobile-compatible tables, add the .table-responsive-stack
class.
Name | Color | Taste |
---|---|---|
Name: Apple | Color: Green and Red | Taste: Sweet and Tart |
Name: Banana | Color: Yellow | Taste: Sweet and Mushy |
Name: Mango | Color: Yellowish Green | Taste: Tangy |
Name: Orange | Color: Orange | Taste: Sweet and Tangy |
Name: Blueberry | Color: Blue | Taste: Mild Sweetness |
<table class="table table-bordered table-striped table-responsive-stack">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Taste</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Green and Red</td>
<td>Sweet and Tart</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>Sweet and Mushy</td>
</tr>
<tr>
<td>Mango</td>
<td>Yellowish Green</td>
<td>Tangy</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>Sweet and Tangy</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>Mild Sweetness</td>
</tr>
</tbody>
</table>