Background colors
Solid colors
.bg-* can apply to any element, where * is a color name.
.bg-primary (#ab8ce4)
.bg-secondary (#e4e7ea)
.bg-success (#00c292)
.bg-info (#03a9f3)
.bg-warning (#fbae1c)
.bg-danger (#fb9678)
.bg-purple (#926dde)
.bg-pink (#f96197)
.bg-cyan (#57c7d4)
.bg-yellow (#e0bc00)
.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
.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
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.