Skip to main content Skip to docs navigation
Check
View on GitHub

Color & background

Set a background color with contrasting foreground color.

On this page

Overview

Added in v5.2.0

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-color.

Heads up! There’s currently no support for a CSS-native color-contrast function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.
Primary with contrasting color
Secondary with contrasting color
Success with contrasting color
Danger with contrasting color
Warning with contrasting color
Info with contrasting color
Light with contrasting color
Dark with contrasting color
Maricopa-Blue with contrasting color
Cgc-Primary with contrasting color
Cgc-Secondary with contrasting color
Emc-Primary with contrasting color
Emc-Secondary with contrasting color
Gcc-Primary with contrasting color
Gcc-Secondary with contrasting color
Gwc-Primary with contrasting color
Gwc-Secondary with contrasting color
Mcc-Primary with contrasting color
Mcc-Secondary with contrasting color
Pcc-Primary with contrasting color
Pcc-Secondary with contrasting color
Pvc-Primary with contrasting color
Pvc-Secondary with contrasting color
Rsc-Primary with contrasting color
Rsc-Secondary with contrasting color
Scc-Primary with contrasting color
Scc-Secondary with contrasting color
Smc-Primary with contrasting color
Smc-Secondary with contrasting color
html
<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>
<div class="text-bg-maricopa-blue p-3">Maricopa-Blue with contrasting color</div>
<div class="text-bg-cgc-primary p-3">Cgc-Primary with contrasting color</div>
<div class="text-bg-cgc-secondary p-3">Cgc-Secondary with contrasting color</div>
<div class="text-bg-emc-primary p-3">Emc-Primary with contrasting color</div>
<div class="text-bg-emc-secondary p-3">Emc-Secondary with contrasting color</div>
<div class="text-bg-gcc-primary p-3">Gcc-Primary with contrasting color</div>
<div class="text-bg-gcc-secondary p-3">Gcc-Secondary with contrasting color</div>
<div class="text-bg-gwc-primary p-3">Gwc-Primary with contrasting color</div>
<div class="text-bg-gwc-secondary p-3">Gwc-Secondary with contrasting color</div>
<div class="text-bg-mcc-primary p-3">Mcc-Primary with contrasting color</div>
<div class="text-bg-mcc-secondary p-3">Mcc-Secondary with contrasting color</div>
<div class="text-bg-pcc-primary p-3">Pcc-Primary with contrasting color</div>
<div class="text-bg-pcc-secondary p-3">Pcc-Secondary with contrasting color</div>
<div class="text-bg-pvc-primary p-3">Pvc-Primary with contrasting color</div>
<div class="text-bg-pvc-secondary p-3">Pvc-Secondary with contrasting color</div>
<div class="text-bg-rsc-primary p-3">Rsc-Primary with contrasting color</div>
<div class="text-bg-rsc-secondary p-3">Rsc-Secondary with contrasting color</div>
<div class="text-bg-scc-primary p-3">Scc-Primary with contrasting color</div>
<div class="text-bg-scc-secondary p-3">Scc-Secondary with contrasting color</div>
<div class="text-bg-smc-primary p-3">Smc-Primary with contrasting color</div>
<div class="text-bg-smc-secondary p-3">Smc-Secondary with contrasting color</div>

With components

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

Primary Info
html
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

Or on cards:

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

html
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>