Color

Text

Change your text color with contextual color utility classes.

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

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

<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:

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

Or on cards:

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

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

Mixins

No mixins available.