Use a class
.bg-info, .bg-success, .bg-warning and .bg-danger classes. with
light text on dark backgrounds inside table element. To set the light
background color use .bg-[color] class where [color] is the value of your
selected color from stack color palette. So for teal color background class
will be .bg-teal
#
First Name
Last Name
Username
Role
Country
1
Alexander
Orton
@mdorton
Admin
USA
2
John Deo
Deo
@johndeo
User
USA
3
Randy Orton
the Bird
@twitter
admin
UK
4
Randy Mark
Ottandy
@mdothe
user
AUS
5
Ram Jacob
Thornton
@twitter
admin
IND
Hoverable rows
Use a class table-hover to enable a
hover state on table rows within a tbody.
#
First Name
Last Name
Username
Role
Country
1
Alexander
Orton
@mdorton
Admin
USA
2
John Deo
Deo
@johndeo
User
USA
3
Randy Orton
the Bird
@twitter
admin
UK
4
Randy Mark
Ottandy
@mdothe
user
AUS
5
Ram Jacob
Thornton
@twitter
admin
IND
Contextual classes
Use contextual classes to color table rows or
individual cells. you may use Classes
table-primary,table-secondary,table-success,table-info,table-warning,table-danger,table-light,table-active
intr
Class
Heading
Heading
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Info
Cell
Cell
Warning
Cell
Cell
Danger
Cell
Cell
Light
Cell
Cell
Active
Cell
Cell
Text or background utilities
Regular table background variants are
not available with the inverse table, however, you may use Classes
bg-dark,bg-warning,bg-success,bg-info,bg-danger,bg-primary,bg-secondary,bg-light
intd
#
Heading
Heading
1
primary
primary
2
secondary
secondary
3
success
success
4
info
info
5
warning
warning
6
danger
danger
7
light
light
Table head options
Similar to tables and dark tables, use the
modifier classes .table-dark to make thead appear
light or dark gray.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Table head options
Similar to tables and dark tables, use the
modifier classes .bg-*and .table-light to make
thead appear light or dark gray.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Striped Row
Use .table-striped to add zebra-striping
to any table row within the . 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
@twitter
Striped Row with Inverse Table
Use .table-striped to
add zebra-striping to any table row within the . 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
@twitter
Caption
A <caption> 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.
List of users
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Responsive Tables
A <caption> 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.
#
Table heading
Table heading
Table heading
Table heading
Table heading
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
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
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 cell
Table cell
Table cell
Table cell
Table cell
Breckpoint Specific
Use
.table-responsive{-sm|-md|-lg|-xl} 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.
