Background

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

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilitiesdo not set color , so in some cases you’ll want to use .text-* utilities.

Design

Code

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

<div className="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div className="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div className="p-3 mb-2 bg-success text-white">.bg-success</div>
<div className="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div className="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div className="p-3 mb-2 bg-info text-white">.bg-info</div>
<div className="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div className="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div className="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div className="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Opacity

As of v5.1.0, background-color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

Design

Code

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 className="bg-success p-2 text-white">This is default success background</div>
<div className="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div className="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div className="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div className="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>