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>