Table
For user to check they list
Table with outer spacing
Using the most basic table up, here’s how
.table-based tables look in Bootstrap. You can use any example
of below table for your table and it can be use with any type of bootstrap
tables.
| NAME | RATE | SKILL |
|---|---|---|
| Michael Right | $15/hr | UI/UX |
| Morgan Vanblum | $13/hr | Graphic concepts |
| Tiffani Blogz | $15/hr | Animation |
| Ashley Boul | $15/hr | Animation |
| Mikkey Mice | $15/hr | Animation |
Table without outer spacing
Using the most basic table up, here’s how
.table-based tables look in Bootstrap. You can use any example
of below table for your table and it can be use with any type of bootstrap
tables.
| NAME | RATE | SKILL |
|---|---|---|
| Michael Right | $15/hr | UI/UX |
| Morgan Vanblum | $13/hr | Graphic concepts |
| Tiffani Blogz | $15/hr | Animation |
| Ashley Boul | $15/hr | Animation |
| Mikkey Mice | $15/hr | Animation |
Inverse table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
You can also invert the colors—with dark text on light backgrounds—with .table-light.
Table head options
Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to
make <thead>s appear light or
dark gray.
Striped rows
Use .table-striped
to add
zebra-striping to any
table row within the <tbody>.
This styling
doesn't work in IE8
and below as :nth-child CSS selector isn't supported.
Striped inverse dark
Use .table-dark with
.table-striped to add
zebra-striping to
any inverse table row within the <tbody>. This styling
doesn't work
in
IE8 and below as
:nth-child CSS selector isn't supported.
Bordered table
Add .table-bordered for borders on all sides
of the table
and
cells. For
Inverse Dark Table, add .table-dark along with
.table-bordered.
Borderless Table
Add .table-borderless for a table without
borders. It can
also
be used on
dark tables.
Hoverable rows
Add .table-hover to enable a hover
state on table
rows
within a
<tbody>.
Contextual classes
Use contextual classes to color table rows or individual cells. Read full documnetation here.
Always responsive
Responsive tables allow tables to be scrolled horizontally with ease. Make
any table
responsive across all
viewports by adding .table-responsive
class on
.table. Or, pick a maximum breakpoint
with which
to
have a responsive
table up to by adding .table-responsive{-sm|-md|-lg|-xl}.
Read full
documnetation here.
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.
| # | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 | Heading 7 | Heading 8 | Heading 9 | Heading 10 | Heading 11 | Heading 12 | Heading 13 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Michael Right | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| Michael Right | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| Michael Right | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |