Color Utility
Convey meaning through color with a handful of color utility classes. This utilities to quickly style the text and background of any element.
Background Color
A set of solid background utilities classes. Use
.bg-{color} classs
in element to set background color.
Theme Color
Theme Pale Color
Theme Lighten Color
Additional Color
Additional Pale Color
| Class Reference | Theme/Color |
|---|---|
.bg-{theme} |
primary | secondary | success | info | warning | danger | dark | gray |
.bg-{theme}-dim
|
Use for pale/dim color and
{theme} same as above
|
.bg-{color}
|
blue | azure | indigo | purple | pink | orange | teal |
.bg-{color}-dim
|
Use for pale/dim color and
{color} same as above
|
.bg-light |
Use for light background |
.bg-lighter |
Use for extra light background |
.bg-white |
Use for white background |
.bg-transparent |
Use for transparent background |
<div class="bg-primary"> ... </div> <div class="bg-primary is-dim"> ... </div>
Gray & Dark Color
A set of shade color of gray and dark classes. Use
.bg-gray-{value}
classs in element to set background color.
| Class Reference | Value |
|---|---|
.bg-gray-{value} |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
<div class="bg-gray-200"> ... </div>
Text Color
A set of text color utilities classes. Use
.text-{theme|color}
classs in element to set text color.
| Class Reference | Preview |
|---|---|
.text-primary |
Text in primary color |
.text-secondary |
Text in secondary color |
.text-success |
Text in success color |
.text-danger |
Text in danger color |
.text-warning |
Text in warning color |
.text-info |
Text in info color |
.text-body |
Text in body color |
.text-dark |
Text in dark color |
.text-base |
Text in base color |
.text-soft |
Text in soft color |
.text-black-50 |
Text in black 50% color |
.text-light |
Text in light color |
.text-lighter |
Text in lighter color |
.text-white |
Text in white color |
.text-{theme}.text-{theme}-dim
|
Use for text color & -dim user
for pale color. {theme} use as
primary, secondary, success, info, warning,
danger, dark, gray
|
.text-{color}.text-{color}-dim
|
Use for text color & -dim user
for pale color.{color} use as
blue, azure, indigo, purple, pink, orange,
teal
|
<p class="text-primary"> ... </p> <span class="text-primary"> ... </span>
