Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text color
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-darker
.text-body
.text-body-secondary
.text-black
.text-white
Background color
Easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.
Gradients
You can opt to use gradients text by adding .text-gradient to any element.
The following are predefined variations, you can of course define your own variations by changing the SASS files.
.text-gradient-primary
.text-gradient-success
.text-gradient-warning
Alpha colors
.color-primary
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-secondary
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-success
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-danger
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-warning
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-info
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-light
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-dark
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-darker
.alpha-100
.alpha-75
.alpha-50
.alpha-25
.color-black
.alpha-100
.alpha-75
.alpha-50
.alpha-25