Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Examples #
Due to the widespread use of tables across third-party widgets like calendars and
date pickers, we’ve designed our tables to be opt-in. Just add
the base class
.table to any
<table> , then extend with custom
styles or our various included modifier classes.
Using the most basic table markup, here’s how .table-based
tables look in
Bootstrap.
All table styles are inherited in Bootstrap 4
, meaning any nested
tables will be styled in the same manner as the parent.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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>You can also invert the colors—with light text on dark backgrounds—with
.table-dark.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-dark">
<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>Table head options #
Similar to tables and dark tables, use the modifier classes .thead-light or
.thead-dark to make
<table> s appear light or dark
gray.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<thead class="thead-dark">
<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>
<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>Striped rows #
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 |
<table class="table table-striped">
<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>| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped table-dark">
<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>Bordered table #
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered">
<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>| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered table-dark">
<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>Borderless table #
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-borderless">
<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>Hoverable rows #
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover table-white">
<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>| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover table-dark">
<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>Small table #
| # | 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>| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-sm table-dark">
<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>Contextual classes #
| Class | Heading | Heading |
|---|---|---|
| Active | Cell | Cell |
| 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 |
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">Active</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>Regular table background variants are not available with the dark table, however, you may use text or background utilitiesto achieve similar styles.
| # | Heading | Heading |
|---|---|---|
| 1 | Cell | Cell |
| 2 | Cell | Cell |
| 3 | Cell | Cell |
| 4 | Cell | Cell |
| 5 | Cell | Cell |
| 6 | Cell | Cell |
| 7 | Cell | Cell |
| 8 | Cell | Cell |
| 9 | Cell | Cell |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-success">
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-info">
<th scope="row">5</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-warning">
<th scope="row">7</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-danger">
<th scope="row">9</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
.sr-onlyclass.
Create responsive tables by wrapping any .table with
.table-responsive{-sm|-md|-lg|-xl},
making the table scroll horizontally at each
max-width breakpoint of up to (but not
including) 576px, 768px, 992px, and
1120px, respectively.
Note
Note that since browsers do not currently support range context queries , we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
Captions #
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 |
<table class="table">
<caption>List of users</caption>
<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>Responsive tables #
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}.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden, which clips off any
content that goes beyond the bottom or top edges of the table. In
particular, this can clip off dropdown menus and other third-party widgets.
Always responsive #
Across every breakpoint, use .table-responsive for horizontally
scrolling tables.
| # | 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">
</table>
</div>Breakpoint specific #
Use .table-responsive{-sm|-md|-lg|-xl} as
needed to create responsive tables up
to a particular breakpoint. From that breakpoint and up, the table will behave
normally and not scroll horizontally.
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-sm">
<table class="table">
</table>
</div>
<div class="table-responsive-md">
<table class="table">
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
</table>
</div>Thedir examples #
MEE
Studio
3D
Animation
Designer
|
Moutain View, CA |
Freelancer
|
Wave Agency
Account
Executive
|
Chicago |
Part Time
|
ABA Logistic
JSC
Transport
Shift Controller
|
Copenhagen |
Temporary
|
Arates Property
Co
Intership
Property Sale
|
London, UK |
Intership
|
Roihalatan LLC
UI/UX Product Designer
|
Anywhere |
Remote
|
BeatsLabs Co
WordPress
Front-End Developer
|
Ukraine |
Full Time
|
Sun Travel Co
Travel
Sale Consultant
|
Berlin, Germany |
Full Time
|
<div class="table-responsive">
<table class="table listing-table listing-table-job table-hover bg-white">
<tbody>
<tr>
<td>
<div class="media align-items-center">
<div class="image mr-3">
<img
src="../images/listing/top-job-1.jpg"
alt="Top job 1">
</div>
<div class="media-body lh-14">
<div class="text-gray lh-14">MEE
Studio
</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">3D
Animation
Designer</a>
</div>
</div>
</td>
<td><span
class="text-secondary">Moutain View, CA</span>
</td>
<td>
<div class="d-flex">
<span class="text-link">Freelancer</span>
<span class="text-danger ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<div class="image mr-3">
<img
src="../images/listing/top-job-2.jpg"
alt="Top job 2">
</div>
<div class="media-body lh-14">
<div class="text-gray ">Wave Agency
</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Account
Executive</a>
</div>
</div>
</td>
<td><span class="text-secondary">Chicago</span></td>
<td>
<div class="d-flex">
<span class="text-link">Part Time</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<div class="image mr-3">
<img
src="../images/listing/top-job-3.jpg"
alt="Top job 3">
</div>
<div class="media-body lh-14">
<div class="text-gray ">ABA Logistic
JSC
</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Transport
Shift Controller</a>
</div>
</div>
</td>
<td><span class="text-secondary">Copenhagen</span>
</td>
<td>
<div class="d-flex">
<span class="text-link">Temporary</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<div class="image mr-3">
<img
src="../images/listing/top-job-4.jpg"
alt="Top job 4">
</div>
<div class="media-body lh-14">
<div class="text-gray ">Arates Property
Co
</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Intership
Property Sale</a>
</div>
</div>
</td>
<td><span class="text-secondary">London, UK</span>
</td>
<td>
<div class="d-flex">
<span class="text-link">Intership</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<div class="image mr-3">
<img
src="../images/listing/top-job-5.jpg"
alt="Top job 5">
</div>
<div class="media-body lh-14">
<div class="text-gray ">Roihalatan LLC
</div>
<a href="../listing-details-gallery.html"
class="store-name"><span
class="font-size-md font-weight-semibold text-dark">UI/UX Product Designer</span></a>
</div>
</div>
</td>
<td><span class="text-secondary">Anywhere</span>
</td>
<td>
<div class="d-flex">
<span class="text-link">Remote</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<div class="image mr-3">
<img
src="../images/listing/top-job-6.jpg"
alt="Top job 6">
</div>
<div class="media-body lh-14">
<div class="text-gray ">BeatsLabs Co
</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">WordPress
Thedir -End Developer</a>
</div>
</div>
</td>
<td><span class="text-secondary">Ukraine</span></td>
<td>
<div class="d-flex">
<span class="text-link">Full Time</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<div class="image mr-3">
<img
src="../images/listing/top-job-7.jpg"
alt="Top job 7">
</div>
<div class="media-body lh-14">
<div class="text-gray ">Sun Travel Co
</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Travel
Sale Consultant</a>
</div>
</div>
</td>
<td><span
class="text-secondary">Berlin, Germany</span>
</td>
<td>
<div class="d-flex">
<span class="text-link">Full Time</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
</tbody>
</table>
</div>