Utilities

Background

Convey meaning through background-color and add decoration with gradients.

On this page

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.

Background color#

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you'll want to use .text-* color utilities, or the .text-bg-* helpers that set both.

Unlike in Bootstrap, every .bg-* utility responds to color modes, not just the .bg-*-subtle ones: all theme colors are light-dark() pairs. That includes .bg-light and .bg-dark, so pair .bg-light with .text-body rather than .text-dark.

.bg-primary

.bg-primary-subtle

.bg-secondary

.bg-secondary-subtle

.bg-success

.bg-success-subtle

.bg-danger

.bg-danger-subtle

.bg-warning

.bg-warning-subtle

.bg-info

.bg-info-subtle

.bg-light

.bg-light-subtle

.bg-dark

.bg-dark-subtle

.bg-body-secondary

.bg-body-tertiary

.bg-body

.bg-black

.bg-white

.bg-transparent

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div>
<div class="p-3 mb-2 bg-light text-body">.bg-light</div>
<div class="p-3 mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div>
<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>

In the felt look the solid theme fills are cut from saturated felt, and .bg-body* and .bg-*-subtle from the same cream (or charcoal) felt as the page. A fill made see-through with .bg-opacity-* is a tint instead: the felt underneath shows through it.

Background gradient#

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom. In the felt look it keeps the felt texture and swells like a patch instead.

Do you need a gradient in your custom CSS? Just add background-image: var(--gradient);.

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-light.bg-gradient

.bg-dark.bg-gradient

.bg-black.bg-gradient

Opacity#

background-color utilities use CSS variables. This allows for real-time color changes and dynamic alpha transparency changes.

How it works#

Consider the default .bg-success utility.

.bg-success {
  --bg-opacity: 1;
  background-color: color-mix(in srgb, var(--success) calc(var(--bg-opacity) * 100%), transparent) !important;
}

The theme colors are light-dark() values rather than RGB triplets, so instead of Bootstrap's rgba() the utility fades the color with color-mix(), using a second CSS variable, --bg-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). The local CSS variable inside each .bg-* class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.

Example#

To change that opacity, override --bg-opacity via custom styles or inline styles.

This is default success background

This is 50% opacity success background

<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bg-opacity: .5;">This is 50% opacity success background</div>

Or, choose from any of the .bg-opacity utilities (10, 25, 50, 75, 100):

This is default success background

This is 75% opacity success background

This is 50% opacity success background

This is 25% opacity success background

This is 10% opacity success background

<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-body bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-body bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-body bg-opacity-10">This is 10% opacity success background</div>