Colors ui elements

Accent colors

alert
warning
success
info
yellow
primary
secondary
dark
light

You can use accent colors with: buttons, inputs, divs, paginates, remarks, toasts, notifies and info boxes.

Simple and additional colors

To use simple and additional colors you must add special prefix to color name. Example: bg-* - for background, fg-* - for text color. In table below specified all prefixes.


Target Class
background bg-*
text color fg-*
border bd-*
outline ol-*
active bg-*-active, fg-*-active, bd-*-active, ol-*-active
hover bg-*-hover, fg-*-hover, bd-*-hover, ol-*-hover
focus bg-*-focus, fg-*-focus, bd-*-focus, ol-*-focus
ribbed background ribbed-*
opacity background op-*
before before-bg-*, before-fg-*
after after-bg-*, after-fg-*

Simple colors

black
white
dark
light
grayWhite
grayMouse

Additional colors

light
lime
dark
light
green
dark
light
emerald
dark
light
blue
dark
light
teal
dark
light
cyan
dark
light
cobalt
dark
light
indigo
dark
light
violet
dark
light
pink
dark
light
magenta
dark
light
crimson
dark
light
red
dark
light
orange
dark
light
amber
dark
light
yellow
dark
light
brown
dark
light
olive
dark
light
steel
dark
light
mauve
dark
light
taupe
dark
light
lime
dark
light
gray
dark
light
grayBlue
dark