What this Bootstrap Utility API class does
Sets the CSS property "background-color" on an element. The CSS property "background-color" is used to set the background color of an HTML element. It specifies the color that appears behind the content and within the padding and border of the element.
The available colors are taken from the Bootstrap SASS map $theme-colors.
The "background-color" property is supported by all modern web browsers and is a fundamental part of the CSS box model. By using "background-color" effectively, a web developer can enhance the visual appeal and usability of their web pages.
Example usage & available classes
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Example override
In the example override below, we are enabling the responsive option for the utility, which means it will be available per breakpoint.
"background-color": map-merge(
map-get($utilities, "background-color"),
(
responsive: true
)
)