Color
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Color palette
anchor-100
anchor-200
anchor-300
anchor-400
anchor-500
anchor-600
anchor-700
anchor-800
anchor-900
maroon-100
maroon-200
maroon-300
maroon-400
maroon-500
maroon-600
maroon-700
maroon-800
maroon-900
carrot-100
carrot-200
carrot-300
carrot-400
carrot-500
carrot-600
carrot-700
carrot-800
carrot-900
lollipop-100
lollipop-200
lollipop-300
lollipop-400
lollipop-500
lollipop-600
lollipop-700
lollipop-800
lollipop-900
gold-100
gold-200
gold-300
gold-400
gold-500
gold-600
gold-700
gold-800
gold-900
forest-100
forest-200
forest-300
forest-400
forest-500
forest-600
forest-700
forest-800
forest-900
hoki-100
hoki-200
hoki-300
hoki-400
hoki-500
hoki-600
hoki-700
hoki-800
hoki-900
facebook-100
facebook-200
facebook-300
facebook-400
facebook-500
facebook-600
facebook-700
facebook-800
facebook-900
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
cafe-100
cafe-200
cafe-300
cafe-400
cafe-500
cafe-600
cafe-700
cafe-800
cafe-900
charcoal-100
charcoal-200
charcoal-300
charcoal-400
charcoal-500
charcoal-600
charcoal-700
charcoal-800
charcoal-900
Text Colors
Colorize text with color utilities. If you want to colorize links, you can use the
.link-* helper classes which have :hover and :focus states.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
.text-highlight
Background Colors
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities do not set
color, so in some cases you’ll want to use .text-* utilities.
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
.bg-highlight
Background Gradient
By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient