Figuration v4.4 is now available!

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.

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>

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-white">.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>

Backgrounds with Contrasting Text

Don't want to mess around with trying to figure out what text color provides proper contrast for a given background? Combine the power of the bg-* and .text-* utilities into one class where a foreground color of proper contrast is automatically determined through our Sass color-contrast() function based on the given background-color.

.bgtext-primary
.bgtext-success
.bgtext-info
.bgtext-warning
.bgtext-danger
.bgtext-light
.bgtext-dark
<div class="p-0_5 mb-1 bgtext-primary">.bgtext-primary</div>
<div class="p-0_5 mb-1 bgtext-success">.bgtext-success</div>
<div class="p-0_5 mb-1 bgtext-info">.bgtext-info</div>
<div class="p-0_5 mb-1 bgtext-warning">.bgtext-warning</div>
<div class="p-0_5 mb-1 bgtext-danger">.bgtext-danger</div>
<div class="p-0_5 mb-1 bgtext-light">.bgtext-light</div>
<div class="p-0_5 mb-1 bgtext-dark">.bgtext-dark</div>

With Components

Use the .bgtext-* utilities in place of combined .text-* and .bg-* classes, like on badges:

Primary Info
<span class="badge bgtext-success">Primary</span>
<span class="badge bgtext-warning">Info</span>

Or on cards:

Header

Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Header

Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="card bgtext-secondary mb-1" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="card bgtext-light mb-1" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</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. Inherit the border color of an ancestor element with .border-inherit.

<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-white"></span>
<span class="border border-black"></span>
<span class="border border-transparent"></span>
<span class="border border-inherit"></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-bgtext boolean true Enable the generation of the theme background colors with contrasting text 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 white, black, transparent, and inherit border color utility classes.
$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 text color utility classes.
$utility-bg-colors map $base-colors Themed background colors.
$palette-colors-bg map $palette-colors Palette-based background colors.
$utility-bgtext-colors map $base-colors Themed background colors with contrasting text.
$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.