Color utilities

Background colors

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-dark
Light colors

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

.bg-primary-light
.bg-secondary-light
.bg-success-light
.bg-info-light
.bg-warning-light
.bg-danger-light
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-gradient-fruit
.bg-gradient-purple
.bg-gradient-oceansky
.bg-gradient-rosegold
.bg-gradient-ultraviolet
.bg-gradient-botani
.bg-gradient-ubuntu
.bg-gradient-patriot
.bg-gradient-vintage
.bg-gradient-mint
.bg-gradient-deepocean
.bg-gradient-school
.bg-gradient-leaf
.bg-gradient-metalred
.bg-gradient-grey
gradient colors in dark theme
.bg-gradient-fruit-dark
.bg-gradient-purple-dark
.bg-gradient-oceansky-dark
.bg-gradient-rosegold-dark
.bg-gradient-ultraviolet-dark
.bg-gradient-botani-dark
.bg-gradient-ubuntu-dark
.bg-gradient-patriot-dark
.bg-gradient-vintage-dark
.bg-gradient-mint-dark
.bg-gradient-deepocean-dark
.bg-gradient-school-dark
.bg-gradient-leaf-dark
.bg-gradient-metalred-dark
.bg-gradient-grey-dark

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

Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?