Contents
Tables
documentation and examples for opt-in style of tables ( given their prevailing 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
, then extend with custom styles or our respective included modifier classes .
Using the most basic mesa markup, here ’ randomness how .table -based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nest tables will be styled in the same manner as the rear.
Reading: Tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
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
You can besides invert the colors—with light text on iniquity backgrounds—with .table-dark .
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
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
Table head options
like to tables and dark tables, use the changer 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
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
Striped rows
Use .table-striped to add zebra-striping to any table row within the
.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
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
Bordered 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 | ||
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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
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
Hoverable rows
Add .table-hover to enable a levitate state on table rows within a
.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
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
Small table
Add .table-sm to make tables more compendious by cutting cell padding in half .
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
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
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
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
Contextual classes
Use contextual classes to color board 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 |
On rows
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”
>
…
unconstipated postpone background variants are not available with the dark table, however, you may use text or backdrop utilities to achieve like 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 |
On rows
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 merely provides a ocular indication, which will not be conveyed to users of assistive technologies – such as shield readers. see 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 extra text obscure with the .sr-only class .
Create reactive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the board 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 presently support stove context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths ( which can occur under sealed conditions on high-dpi devices, for example ) by using values with higher preciseness for these comparisons .
Captions
A
functions like a head for a postpone. It helps users with screen readers to find a table and understand what it ’ randomness 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"
>
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
Responsive tables
responsive tables allow tables to be scrolled horizontally with rest. Make any mesa responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a utmost breakpoint with which to have a responsive postpone up to by using .table-responsive{-sm|-md|-lg|-xl} .
Vertical clipping/truncation
reactive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In especial, this can clip off dropdown menu and other third-party widgets .
Always responsive
Across every breakpoint, use .table-responsive for horizontally scroll 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 reactive tables up to a finical breakpoint. From that breakpoint and up, the postpone 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” > …
