What this Bootstrap Utility API class does
Sets the CSS variable "--bs-bg-opacity" which is used to control the opacity on the CSS property background-color.
This is used in the CSS rule as follows: background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity))
.
Example usage & available classes
<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-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</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.
"bg-opacity": map-merge(
map-get($utilities, "bg-opacity"),
(
responsive: true
)
)