Color utilities

Background colors

Solid colors

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

.bg-primary (#0bb2d4)
.bg-secondary (#e4eaec)
.bg-success (#17b3a3)
.bg-info (#3e8ef7)
.bg-warning (#faa700)
.bg-danger (#ff4c52)
.bg-purple (#7231F5)
.bg-pink (#E6155E)
.bg-cyan (#57c7d4)
.bg-yellow (#fcc525)
.bg-brown (#6B534C)
.bg-dark (#526069)
.bg-aqua (#00FFFF)
.bg-light-blue (#ADD8E6)
.bg-blue (#3e8ef7)
.bg-green (#11C26D)
Pale colors

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

.bg-pale-primary (#9DE6F5)
.bg-pale-secondary (#f7fafc)
.bg-pale-success (#92F0E6)
.bg-pale-info (#B8D7FF)
.bg-pale-warning (#FFF6B5)
.bg-pale-danger (#FFBFC1)
.bg-pale-purple (#D9C7FC)
.bg-pale-pink (#FFBAD2)
.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 with color

.bg-temple-dark
.bg-food-dark
.bg-brick-dark
.bg-bubbles-dark

SVG Background with Transparent color

.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.