Color

Add a little, or a lot of, color to your site or application.

Page Contents

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.

Some of the utility color styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

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

<p class="text-primary">.text-primary</p>
<p class="text-success">.text-success</p>
<p class="text-info">.text-info</p>
<p class="text-warning">.text-warning</p>
<p class="text-danger">.text-danger</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black">.text-black</p>

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.

<p><a href="#" class="text-primary">.text-primary</a></p>
<p><a href="#" class="text-success">.text-success</a></p>
<p><a href="#" class="text-info">.text-info</a></p>
<p><a href="#" class="text-warning">.text-warning</a></p>
<p><a href="#" class="text-danger">.text-danger</a></p>
<p><a href="#" class="text-light bg-dark">.text-light</a></p>
<p><a href="#" class="text-dark">.text-dark</a></p>
<p><a href="#" class="text-body">.text-body</a></p>
<p><a href="#" class="text-muted">.text-muted</a></p>
<p><a href="#" class="text-white bg-dark">.text-white</a></p>
<p><a href="#" class="text-black">.text-black</a></p>

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.

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-light

.bg-dark

.bg-body

.bg-white

.bg-black

.bg-transparent

<div class="p-0_5 mb-1 bg-primary text-white">.bg-primary</div>
<div class="p-0_5 mb-1 bg-success text-black">.bg-success</div>
<div class="p-0_5 mb-1 bg-info text-white">.bg-info</div>
<div class="p-0_5 mb-1 bg-warning text-black">.bg-warning</div>
<div class="p-0_5 mb-1 bg-danger text-white">.bg-danger</div>
<div class="p-0_5 mb-1 bg-light text-black">.bg-light</div>
<div class="p-0_5 mb-1 bg-dark text-white">.bg-dark</div>
<div class="p-0_5 mb-1 bg-body text-black">.bg-body</div>
<div class="p-0_5 mb-1 bg-white text-black">.bg-white</div>
<div class="p-0_5 mb-1 bg-black text-white">.bg-black</div>
<div class="p-0_5 mb-1 bg-transparent text-black">.bg-transparent</div>

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.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-info"></span>
<span class="border border-warning"></span>
<span class="border border-danger"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-transparent"></span>

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.

.text-primary-700 text

.text-primary-400 link

.bg-primary-100 background with .text-primary-900

<p class="text-primary-700">.text-primary-700 text</p>
<p><a href="#" class="text-primary-400">.text-primary-400 link</a></p>
<div class="bg-primary-100 text-primary-900 mb-0_5 p-0_5">.bg-primary-100 background with .text-primary-900</div>
<span class="border border-primary-200"></span>

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.