Color
Add a little, or a lot of, color to your site or application.
Dealing with Specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div>
with the class.
Conveying Meaning to Assistive Technologies
Please refer to the Accessiblity notes about conveying meaning with color.
Contents
Text
Change your text color with contextual color utility classes.
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black
Links
Contextual text color classes also work well on anchors with the provided hover and focus states.
Note: The .text-body
, .text-muted
, .text-white
, and .text-black
classes have no link styling, other than the default underline.
Backgrounds
Similar to the contextual text color classes, easily set the background color of an element to any contextual class. Background utilities do not set color
, so in some cases you will want to use .text-*
utilities.
There is also a .bg-transparent
for removing the background color of an element.
Borders
Borders also be colored with their own set of contextual classes. Borders do not change color on hover and focus state.
There is also a .border-transparent
that removes the border color of an element, but keeps the border width in place.
Palette Colors
If the color palette is enabled, any color theme that is added to the $palette-themes
Sass map will become available for use. For example the theme named primary
, then becomes available as .text-primary-[level]
, .bg-primary-[level]
, and border-primary-[level]
, where level
is in the set defined by the $palette-levels
variable.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.
Name | Type | Default | Description |
---|---|---|---|
$enable-utility-bg-colors |
boolean | true |
Enable the generation of the theme background color utility classes. |
$enable-utility-bg-palette |
boolean | true |
Enable the generation of the palette background color utility classes. |
$enable-utility-bg-special |
boolean | true |
Enable the generation of the body, black, white, and transparent background color utility classes. |
$enable-utility-border-colors |
boolean | true |
Enable the generation of the theme border color utility classes. |
$enable-utility-border-palette |
boolean | true |
Enable the generation of the palette border color utility classes. |
$enable-utility-border-special |
boolean | true |
Enable the generation of the transparent border color utility class. |
$enable-utility-text-colors |
boolean | true |
Enable the generation of the theme text color utility classes. |
$enable-utility-text-palette |
boolean | true |
Enable the generation of the palette text color utility classes. |
$enable-utility-text-special |
boolean | true |
Enable the generation of the body, black, white, and muted background color utility classes. |
$utility-bg-colors |
map | $base-colors |
Themed background colors. |
$palette-colors-bg |
map | $palette-colors |
Palette-based background colors. |
$palette-levels-bg |
list | $palette-levels |
List of palette levels to use with palette background colors. |
$utility-border-colors |
map | $base-colors |
Themed border colors. |
$palette-colors-borders |
map | $palette-colors |
Palette-based border colors. |
$palette-levels-borders |
list | $palette-levels |
List of palette levels to use with palette colors. |
$utility-text-colors |
map | $base-colors |
Themed text colors. |
$palette-colors-text |
map | $palette-colors |
Palette-based text colors. |
$palette-levels-text |
list | $palette-levels |
List of palette levels to use with palette text colors. |
Mixins
No mixins available.