Using the most basic table markup, 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.
Example 1: Table with outer spacing
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Example 2: Minimal Table with no outer spacing.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
You can also invert the colors—with light text on dark backgrounds—with .bg-info, .bg-success, .bg-warning and .bg-danger classes
.
To set the light background color use .bg-[color]
class where [color]
is the value of your selected color from robust color palette. So for teal color background class will be .bg-teal
. Refer HTML markup line no 1. Background color class is a optional if you don't it will take white background default.
To set the selected background color lighten use .bg-lighten-[*]
class where [*]
is the value between '1-5' of your selected lighten color from robust color palette. So for color lighten 4 background class will be .bg-lighten-4
. Refer HTML markup line no 1. Background lighten color class is a optional if you don't it will take white background default.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Similar to default and inverse tables, use one of two modifier classes .thead-default
or .thead-inverse
to make <thead>
s appear light or dark gray.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Use background classes bg-*
to make custom thead
background. You can also use Robust Admin color palette classes for background.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Use .table-inverse
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.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Use contextual classes to color table rows or individual cells.
Class | Description |
---|---|
.table-active
|
Applies the hover color to a particular row or cell |
.table-success
|
Indicates a successful or positive action |
.table-info
|
Indicates a neutral informative change or action |
.table-warning
|
Indicates a warning that might need attention |
.table-danger
|
Indicates a dangerous or potentially negative action |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Larry | the Bird | |
5 | Larry | the Bird | |
6 | Larry | the Bird | |
7 | Larry | the Bird | |
8 | Larry | the Bird | |
8 | Larry | the Bird |
Regular table background variants are not available with the inverse table, however, you may use text or background utilities to achieve similar styles.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Larry | the Bird | |
5 | Larry | the Bird | |
6 | Larry | the Bird | |
7 | Larry | the Bird | |
8 | Larry | the Bird | |
8 | Larry | the Bird |
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}
.
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
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
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.
# | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell |
# | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell |
# | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell |
# | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell |