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
primary
secondary
dark
gray
success
danger
warning
info
Theme Pale Color
primary
secondary
dark
gray
success
danger
warning
info
Theme Lighten Color
light
lighter
white
Additional Color
blue
azure
indigo
purple
pink
orange
teal
Additional Pale Color
blue
azure
indigo
purple
pink
orange
teal
| 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 |
Uses Example
<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.
100
200
300
400
500
600
700
800
900
| Class Reference | Value |
|---|---|
.bg-gray-{value} |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Uses Example
<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
|
Uses Example
<p class="text-primary"> ... </p> <span class="text-primary"> ... </span>