Toggle navigation

Color utilities

  2. UI
  3. Color utilities

Backgroundcolors

Solid colors

.bg-*can apply to any element, where *is a color name.

.bg-primary.bg-secondary.bg-success.bg-info.bg-warning.bg-danger.bg-purple.bg-pink.bg-cyan.bg-yellow.bg-brown.bg-dark.bg-aqua.bg-light-blue.bg-blue.bg-green
Pale colors

.bg-pale-*can apply to any element, where *is a color name.

.bg-pale-primary.bg-pale-secondary.bg-pale-success.bg-pale-info.bg-pale-warning.bg-pale-danger.bg-pale-purple.bg-pale-pink.bg-pale-cyan.bg-pale-yellow.bg-pale-brown.bg-pale-dark
Other colors

Some other fade colors are available for background-color.

.bg-white.bg-transparent.bg-light.bg-lighter.bg-lightest

Bordercolors

.border-*can apply to any element, where *is a color name.

Default color.border-primary.border-secondary.border-success.border-info.border-warning.border-danger.border-purple.border-pink.border-cyan.border-yellow.border-brown.border-dark.border-white.border-light.border-transparent

Textcolors

Text colors

.text-*can apply to any element, where *is a color name. Please note that you can safely add these classes to an <a>element.

.text-primary.text-secondary.text-success.text-info.text-warning.text-danger.text-purple.text-pink.text-cyan.text-yellow.text-brown.text-dark.text-mute.text-light.text-lighter.text-fade.text-white
Hover colors

.hover-*can apply to any element, where *is a color name. Please note that you can safely add these classes to an <a>element.

.text-primary.text-secondary.text-success.text-info.text-warning.text-danger.text-purple.text-pink.text-cyan.text-yellow.text-brown.text-dark.text-mute.text-light.text-lighter.text-fade.text-white