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 ReferenceTheme/Color
.bg-{theme}
primary | secondary | success | info | warning | danger | dark | gray
.bg-{theme}-dimUse for pale/dim color and {theme} same as above
.bg-{color}blue | azure | indigo | purple | pink | orange | teal
.bg-{color}-dimUse for pale/dim color and {color} same as above
.bg-lightUse for light background
.bg-lighterUse for extra light background
.bg-whiteUse for white background
.bg-transparentUse 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 ReferenceValue
.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 ReferencePreview
.text-primaryText in primary color
.text-secondaryText in secondary color
.text-successText in success color
.text-dangerText in danger color
.text-warningText in warning color
.text-infoText in info color
.text-bodyText in body color
.text-darkText in dark color
.text-baseText in base color
.text-softText in soft color
.text-black-50Text in black 50% color
.text-lightText in light color
.text-lighterText in lighter color
.text-whiteText 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>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?