View on GitHub

Color and background

Set a background color with contrasting foreground color.

On this page

Overview

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. We determine a contrasting color for a particular background-color. However, it doesn’t change mode at all.

Please consider using our color modes directly as explained in our background utilities to set nested components in the right mode directly as well.

.text-bg-primary

.text-bg-secondary

.text-bg-tertiary

.text-bg-emphasized

.text-bg-brand-primary

.text-bg-status-neutral-emphasized

.text-bg-status-neutral-muted

.text-bg-status-accent-emphasized

.text-bg-status-accent-muted

.text-bg-status-positive-emphasized

.text-bg-status-positive-muted

.text-bg-status-negative-emphasized

.text-bg-status-negative-muted

.text-bg-status-warning-emphasized

.text-bg-status-warning-muted

.text-bg-status-info-emphasized

.text-bg-status-info-muted

.text-bg-always-black

.text-bg-always-white

<p class="text-bg-primary p-tall fw-bold">.text-bg-primary</p>
<p class="text-bg-secondary p-tall fw-bold">.text-bg-secondary</p>
<p class="text-bg-tertiary p-tall fw-bold">.text-bg-tertiary</p>
<p class="text-bg-emphasized p-tall fw-bold">.text-bg-emphasized</p>
<p class="text-bg-brand-primary p-tall fw-bold">.text-bg-brand-primary</p>
<p class="text-bg-status-neutral-emphasized p-tall fw-bold">.text-bg-status-neutral-emphasized</p>
<p class="text-bg-status-neutral-muted p-tall fw-bold">.text-bg-status-neutral-muted</p>
<p class="text-bg-status-accent-emphasized p-tall fw-bold">.text-bg-status-accent-emphasized</p>
<p class="text-bg-status-accent-muted p-tall fw-bold">.text-bg-status-accent-muted</p>
<p class="text-bg-status-positive-emphasized p-tall fw-bold">.text-bg-status-positive-emphasized</p>
<p class="text-bg-status-positive-muted p-tall fw-bold">.text-bg-status-positive-muted</p>
<p class="text-bg-status-negative-emphasized p-tall fw-bold">.text-bg-status-negative-emphasized</p>
<p class="text-bg-status-negative-muted p-tall fw-bold">.text-bg-status-negative-muted</p>
<p class="text-bg-status-warning-emphasized p-tall fw-bold">.text-bg-status-warning-emphasized</p>
<p class="text-bg-status-warning-muted p-tall fw-bold">.text-bg-status-warning-muted</p>
<p class="text-bg-status-info-emphasized p-tall fw-bold">.text-bg-status-info-emphasized</p>
<p class="text-bg-status-info-muted p-tall fw-bold">.text-bg-status-info-muted</p>
<p class="text-bg-always-black p-tall fw-bold">.text-bg-always-black</p>
<p class="text-bg-always-white p-tall fw-bold">.text-bg-always-white</p>
html
Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
Bootstrap $enable-bootstrap-compatibility: true

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