Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Examples
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.
class="table"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 Larry the Bird @twitter You can also invert the colors—with light text on dark backgrounds—with .table-dark .
class="table table-dark"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 Larry the Bird @twitter Table head options
Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make 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 |
class="table"> class="thead-dark"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 Larry the Bird @twitter class="table"> class="thead-light"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 Larry the Bird @twitter Striped rows
Use .table-striped to add zebra-striping to any table row within the .
class="table table-striped"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 Larry the Bird @twitter class="table table-striped table-dark"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 Larry the Bird @twitter Bordered table
Add .table-bordered for borders on all sides of the table and cells.
class="table table-bordered"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 colspan="2">Larry the Bird @twitter class="table table-bordered table-dark"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 colspan="2">Larry the Bird @twitter Hoverable rows
Add .table-hover to enable a hover state on table rows within a .
class="table table-hover"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 colspan="2">Larry the Bird @twitter class="table table-hover table-dark"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 colspan="2">Larry the Bird @twitter Small table
Add .table-sm to make tables more compact by cutting cell padding in half.
class="table table-sm"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 colspan="2">Larry the Bird @twitter class="table table-sm table-dark"> scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 colspan="2">Larry the Bird @twitter Contextual classes
Use contextual classes to color table rows or individual cells.
| 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 |
class="table-active">. class="table-primary">. class="table-secondary">. class="table-success">. class="table-danger">. class="table-warning">. class="table-info">. class="table-light">. class="table-dark">. class="table-active">. class="table-primary">. class="table-secondary">. class="table-success">. class="table-danger">. class="table-warning">. class="table-info">. class="table-light">. class="table-dark">. Regular table background variants are not available with the dark table, however, you may use text or background utilities to 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 |
class="bg-primary">. class="bg-success">. class="bg-warning">. class="bg-danger">. class="bg-info">. class="bg-primary">. class="bg-success">. class="bg-warning">. class="bg-danger">. class="bg-info">. 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-only class.
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 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 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 |
class="table"> List of users scope="col"># scope="col">First scope="col">Last scope="col">Handle scope="row">1 Mark Otto @mdo scope="row">2 Jacob Thornton @fat scope="row">3 Larry the Bird @twitter 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 |
class="table-responsive"> class="table"> . 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 |
class="table-responsive-sm"> class="table"> . class="table-responsive-md"> class="table"> . class="table-responsive-lg"> class="table"> . class="table-responsive-xl"> class="table"> .