React Color & background Helper

Color & background

Set a background color with contrasting foreground color.

On this page

Overview

Added in v4.2.6

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

Info with contrasting color

Warning with contrasting color

Danger with contrasting color

Inverse with contrasting color

<div className="text-bg-primary p-4">Primary with contrasting color</div>
<div className="text-bg-secondary p-4">Secondary with contrasting color</div>
<div className="text-bg-success p-4">Success with contrasting color</div>
<div className="text-bg-info p-4">Info with contrasting color</div>
<div className="text-bg-warning p-4">Warning with contrasting color</div>
<div className="text-bg-danger p-4">Danger with contrasting color</div>
<div className="text-bg-inverse p-4">Inverse with contrasting color</div>

<div className="text-bg-primary p-4">Primary with contrasting color</div>
<div className="text-bg-secondary p-4">Secondary with contrasting color</div>
<div className="text-bg-success p-4">Success with contrasting color</div>
<div className="text-bg-info p-4">Info with contrasting color</div>
<div className="text-bg-warning p-4">Warning with contrasting color</div>
<div className="text-bg-danger p-4">Danger with contrasting color</div>
<div className="text-bg-inverse p-4">Inverse with contrasting color</div>

With components

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

Primary Info

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

<span className="badge text-bg-primary">Primary</span>
<span className="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.

<div className="card text-bg-primary border-primary mb-4" style={{ maxWidth: '18rem' }}>
  <div className="card-header">Header</div>
  <div className="card-body">
    <p className="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 className="card text-bg-info border-info mb-4" style={{ maxWidth: '18rem' }}>
  <div className="card-header">Header</div>
  <div className="card-body">
    <p className="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 className="card text-bg-primary border-primary mb-4" style={{ maxWidth: '18rem' }}>
  <div className="card-header">Header</div>
  <div className="card-body">
    <p className="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 className="card text-bg-info border-info mb-4" style={{ maxWidth: '18rem' }}>
  <div className="card-header">Header</div>
  <div className="card-body">
    <p className="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>