Lucid

Please wait...

Table Color

  • Table
  • Table Color

Table DarkAdd Class .table-dark .table-striped

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head DarkAdd Class .thead-dark

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head LightAdd Class .thead-light

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Solid Color background Add Class .bg-pink

# First Name Last Name Class name
1 Mark Otto .bg-blue
2 Jacob Thornton .bg-cyan
3 Larry the Bird .bg-amber
4 Larry Jellybean .bg-blush
5 Larry Kikat .bg-purple

Gradient Color background Add Class .l-pink

# First Name Last Name Class name
1 Mark Otto .l-pink
2 Jacob Thornton .l-turquoise
3 Larry the Bird .l-parpl
4 Larry Jellybean .l-blue
5 Larry Kikat .l-blush

Light Color background Add Class .xl-pink

# First Name Last Name Class name
1 Mark Otto .xl-pink
2 Jacob Thornton .xl-turquoise
3 Larry the Bird .xl-parpl
4 Larry Jellybean .xl-blue
5 Larry Kikat .xl-khaki

Bootstrap 4 Table background The contextual classes that can be used are:

Class Description
.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background