BRUTOPIA
Table
Who does not love tables?
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 a div with the class
.table-responsive
around the 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 documentation
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 |