Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Add the base class .table
to any <table>
, then extend with our optional modifier classes or custom styles.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
Footer | Footer | Footer | Footer |
<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>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
Similar to tables and dark tables, use the modifier classes .thead-light
or .thead-dark
to make <thead>
s appear light or dark gray.
# | thead-primary | Last Name | Username | Role |
---|
# | thead-secondary | Last Name | Username | Role |
---|
# | thead-success | Last Name | Username | Role |
---|
# | thead-warning | Last Name | Username | Role |
---|
# | thead-info | Last Name | Username | Role |
---|
# | thead-danger | Last Name | Username | Role |
---|
# | thead-dark | Last Name | Username | Role |
---|
# | thead-light | Last Name | Username | Role |
---|
<table class="table">
<thead class="thead-primary">
<tr>
<th>#</th>
<th class="w-30">thead-primary</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
<thead class="thead-secondary">
<tr>
<th>#</th>
<th class="w-30">thead-secondary</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
<thead class="thead-success">
<tr>
<th>#</th>
<th class="w-30">thead-success</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
<thead class="thead-warning">
<tr>
<th>#</th>
<th class="w-30">thead-warning</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
<thead class="thead-info">
<tr>
<th>#</th>
<th class="w-30">thead-info</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
<thead class="thead-danger">
<tr>
<th>#</th>
<th class="w-30">thead-danger</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
<thead class="thead-dark">
<tr>
<th>#</th>
<th class="w-30">thead-dark</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
<thead class="thead-light">
<tr>
<th>#</th>
<th class="w-30">thead-light</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
</table>
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# | Products | Popularity | Sales |
---|---|---|---|
1 | Milk Powder | 28.76% | |
2 | Air Conditioner | 8.55% | |
3 | RC Cars | 58.56% | |
4 | Down Coat | 35.76% |
<table class="table table-hover mb-0">
<thead>
<tr>
<th>#</th>
<th>Products</th>
<th>Popularity</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Milk Powder</td>
<td class="peity-gradient"><div id="sparkline_chart_t1"></div> </td>
<td><span class="text-danger"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 28.76%</span> </td>
</tr>
<tr>
<th scope="row">2</th>
<td>Air Conditioner</td>
<td class="peity-gradient"><div id="sparkline_chart_t2"></div> </td>
<td><span class="text-warning"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 8.55%</span> </td>
</tr>
<tr>
<th scope="row">3</th>
<td>RC Cars</td>
<td class="peity-gradient"><div id="sparkline_chart_t3"></div> </td>
<td><span class="text-success"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 58.56%</span> </td>
</tr>
<tr>
<th scope="row">4</th>
<td>Down Coat</td>
<td class="peity-gradient"><div id="sparkline_chart_t4"></div> </td>
<td><span class="text-info"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 35.76%</span> </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 |
<table class="table table-bordered mb-0">
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Add .table-borderless
for a table without borders.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-borderless mb-0">
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
<table class="table table-hover table-striped mb-0">
<thead>
<tr>
<th>Task</th>
<th>Progress</th>
<th>Deadline</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lunar probe project</td>
<td>
<div class="progress progress-bar-xs mb-0 ">
<div class="progress-bar progress-bar-danger" style="width: 35%"></div>
</div>
</td>
<td>May 15, 2015</td>
<td>
<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
</td>
</tr>
<tr>
<td>Dream successful plan</td>
<td>
<div class="progress progress-bar-xs mb-0 ">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</td>
<td>July 1, 2015</td>
<td>
<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
</td>
</tr>
<tr>
<td>Office automatization</td>
<td>
<div class="progress progress-bar-xs mb-0 ">
<div class="progress-bar progress-bar-success" style="width: 100%"></div>
</div>
</td>
<td>Apr 12, 2015</td>
<td>
<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
</td>
</tr>
<tr>
<td>The sun climbing plan</td>
<td>
<div class="progress progress-bar-xs mb-0 ">
<div class="progress-bar progress-bar-primary" style="width: 70%"></div>
</div>
</td>
<td>Aug 9, 2015</td>
<td>
<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
</td>
</tr>
<tr>
<td>Open strategy</td>
<td>
<div class="progress progress-bar-xs mb-0 ">
<div class="progress-bar progress-bar-primary" style="width: 85%"></div>
</div>
</td>
<td>Apr 2, 2015</td>
<td>
<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
</td>
</tr>
<tr>
<td>Tantas earum numeris</td>
<td>
<div class="progress progress-bar-xs mb-0 ">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</td>
<td>July 11, 2015</td>
<td>
<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
</td>
</tr>
</tbody>
</table>
Add class .table-lg
to make tables large.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Add class .table-sm
to make tables more compact by cutting cell padding in half.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table
with .table-responsive
. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
Use classes ( .active, .success, .info, .warning, .danger )
to color table rows or individual cells.
# | Column heading | Column heading | Column heading |
---|---|---|---|
Active | Column content | Column content | Column content |
Default | Column content | Column content | Column content |
Primary | Column content | Column content | Column content |
Secondary | Column content | Column content | Column content |
Success | Column content | Column content | Column content |
Danger | Column content | Column content | Column content |
Warning | Column content | Column content | Column content |
Info | Column content | Column content | Column content |
Light | Column content | Column content | Column content |
Dark | Column content | Column content | Column content |
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">Active</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
Add class .table-filter
in table tag. and add .table-search
in input field.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Jens | Brincker | Brincker123 |
2 | Mark | Hay | Hay123 |
3 | Anthony | Davie | Davie123 |
4 | David | Perry | Perry123 |
5 | Anthony | Davie | Davie123 |
6 | Alan | Gilchrist | Gilchrist123 |
<input class="form-control mb-2 table-search" id="" type="text" placeholder="Search...">
<div class="table-responsive">
<table class="table table-hover table-filter mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jens</td>
<td>Brincker</td>
<td>Brincker123</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Hay</td>
<td>Hay123</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Anthony</td>
<td>Davie</td>
<td>Davie123</td>
</tr>
<tr>
<th scope="row">4</th>
<td>David</td>
<td>Perry</td>
<td>Perry123</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Anthony</td>
<td>Davie</td>
<td>Davie123</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Alan</td>
<td>Gilchrist</td>
<td>Gilchrist123</td>
</tr>
</tbody>
</table>
</div>
$(".table-search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".table-filter tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});