Color utilities

  1. Home
  2. UI
  3. Color utilities

Background colors

Solid colors

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

.bg-primary (#7460ee) .bg-secondary (#e4e7ea) .bg-success (#26c6da) .bg-info (#1e88e5) .bg-warning (#ffb22b) .bg-danger (#fc4b6c) .bg-purple (#7c277d) .bg-pink (#FC3468) .bg-cyan (#57c7d4) .bg-yellow (#fcc525) .bg-brown (#8d6658) .bg-dark (#465161) .bg-aqua (#00FFFF) .bg-light-blue (#ADD8E6) .bg-blue (#398bf7) .bg-green (#06D73E)
Pale colors

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

.bg-pale-primary (#e1dcff) .bg-pale-secondary (#f7fafc) .bg-pale-success (#c8e5e8) .bg-pale-info (#e3f3fc) .bg-pale-warning (#fcf0e3) .bg-pale-danger (#fce3e3) .bg-pale-purple (#e4d2e4) .bg-pale-pink (#fce3ec) .bg-pale-cyan (#e3fafc) .bg-pale-yellow (#fcf8e3) .bg-pale-brown (#eddcd5) .bg-pale-dark (#c8c8c8)
Other colors

Some other fade colors are available for background-color.

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

Gradient colors

gradient colors
.bg-primary-gradient .bg-secondary-gradient .bg-success-gradient .bg-info-gradient .bg-warning-gradient .bg-danger-gradient
gradient animet colors
.bg-primary-gradient-animet .bg-secondary-gradient-animet .bg-success-gradient-animet .bg-info-gradient-animet .bg-warning-gradient-animet .bg-danger-gradient-animet

SVG Img Background

SVG Background
.bg-temple-dark .bg-food-dark .bg-brick-dark .bg-bubbles-dark
SVG Background
.bg-temple-white .bg-food-white .bg-brick-white .bg-bubbles-white

Border colors

.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

Text colors

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