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
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-blackberry
.bg-gradient-bluegrey
.bg-gradient-celestial
.bg-gradient-cosmicfusion
.bg-gradient-greentea
.bg-gradient-indigodarkblue
.bg-gradient-lightbluecyan
.bg-gradient-manofsteel
.bg-gradient-pomegranate
.bg-gradient-purplebliss
.bg-gradient-purpledeeporange
.bg-gradient-purpledeeppurple
.bg-gradient-purplelightblue
.bg-gradient-strawberry
.bg-gradient-virginamerica
gradient colors in dark theme
.bg-gradient-blackberry-dark
.bg-gradient-bluegrey-dark
.bg-gradient-celestial-dark
.bg-gradient-cosmicfusion-dark
.bg-gradient-greentea-dark
.bg-gradient-indigodarkblue-dark
.bg-gradient-lightbluecyan-dark
.bg-gradient-manofsteel-dark
.bg-gradient-pomegranate-dark
.bg-gradient-purplebliss-dark
.bg-gradient-purpledeeporange-dark
.bg-gradient-purpledeeppurple-dark
.bg-gradient-purplelightblue-dark
.bg-gradient-strawberry-dark
.bg-gradient-virginamerica-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.