Background
Background color
Background primary color with text white color.
Background secondary color with text white color.
Background success color with text white color.
Background danger color with text white color.
Background warning color with text white color.
Background info color with text white color.
Background light color with text dark color.
Background dark color with text white color.
Background body color with text dark color.
Background white color with text dark color.
Background transparent with text dark color.
<p class="bg-primary text-white p-3">Background primary color with text white color.</p>
<p class="bg-secondary text-white p-3">Background secondary color with text white color.</p>
<p class="bg-success text-white p-3">Background success color with text white color.</p>
<p class="bg-danger text-white p-3">Background danger color with text white color.</p>
<p class="bg-warning text-white p-3">Background warning color with text white color.</p>
<p class="bg-info text-white p-3">Background info color with text white color.</p>
<p class="bg-light text-dark p-3">Background light color with text dark color.</p>
<p class="bg-dark text-white p-3">Background dark color with text white color.</p>
<p class="bg-body text-dark p-3">Background body color with text dark color.</p>
<p class="bg-white text-dark p-3">Background white color with text dark color.</p>
<p class="bg-transparent text-dark p-3">Background transparent with text dark color.</p><p class="bg-primary text-white p-3">Background primary color with text white color.</p>
<p class="bg-secondary text-white p-3">Background secondary color with text white color.</p>
<p class="bg-success text-white p-3">Background success color with text white color.</p>
<p class="bg-danger text-white p-3">Background danger color with text white color.</p>
<p class="bg-warning text-white p-3">Background warning color with text white color.</p>
<p class="bg-info text-white p-3">Background info color with text white color.</p>
<p class="bg-light text-dark p-3">Background light color with text dark color.</p>
<p class="bg-dark text-white p-3">Background dark color with text white color.</p>
<p class="bg-body text-dark p-3">Background body color with text dark color.</p>
<p class="bg-white text-dark p-3">Background white color with text dark color.</p>
<p class="bg-transparent text-dark p-3">Background transparent with text dark color.</p>
Background gradient
Background primary color with text white color.
Background secondary color with text white color.
Background success color with text white color.
Background danger color with text white color.
Background warning color with text white color.
Background info color with text white color.
Background light color with text dark color.
Background dark color with text white color.
<p class="bg-primary bg-gradient text-white p-3">Background primary color with text white color.</p>
<p class="bg-secondary bg-gradient text-white p-3">Background secondary color with text white color.</p>
<p class="bg-success bg-gradient text-white p-3">Background success color with text white color.</p>
<p class="bg-danger bg-gradient text-white p-3">Background danger color with text white color.</p>
<p class="bg-warning bg-gradient text-white p-3">Background warning color with text white color.</p>
<p class="bg-info bg-gradient text-white p-3">Background info color with text white color.</p>
<p class="bg-light bg-gradient text-dark p-3">Background light color with text dark color.</p>
<p class="bg-dark bg-gradient text-white p-3">Background dark color with text white color.</p><p class="bg-primary bg-gradient text-white p-3">Background primary color with text white color.</p>
<p class="bg-secondary bg-gradient text-white p-3">Background secondary color with text white color.</p>
<p class="bg-success bg-gradient text-white p-3">Background success color with text white color.</p>
<p class="bg-danger bg-gradient text-white p-3">Background danger color with text white color.</p>
<p class="bg-warning bg-gradient text-white p-3">Background warning color with text white color.</p>
<p class="bg-info bg-gradient text-white p-3">Background info color with text white color.</p>
<p class="bg-light bg-gradient text-dark p-3">Background light color with text dark color.</p>
<p class="bg-dark bg-gradient text-white p-3">Background dark color with text white color.</p>
Opacity
Utility class
25%
50%
75%
100%
CSS custom property
20%
40%
60%
80%
<h4 class="h5 text-muted mt-3">Utility class</h4>
<p class="bg-secondary text-white p-3 bg-opacity-25">25%</p>
<p class="bg-secondary text-white p-3 bg-opacity-50">50%</p>
<p class="bg-secondary text-white p-3 bg-opacity-75">75%</p>
<p class="bg-secondary text-white p-3 bg-opacity-100">100%</p>
<h4 class="h5 text-muted mt-3">CSS custom property</h4>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .2">20%</p>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .4">40%</p>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .6">60%</p>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .8">80%</p><h4 class="h5 text-muted mt-3">Utility class</h4>
<p class="bg-secondary text-white p-3 bg-opacity-25">25%</p>
<p class="bg-secondary text-white p-3 bg-opacity-50">50%</p>
<p class="bg-secondary text-white p-3 bg-opacity-75">75%</p>
<p class="bg-secondary text-white p-3 bg-opacity-100">100%</p>
<h4 class="h5 text-muted mt-3">CSS custom property</h4>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .2">20%</p>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .4">40%</p>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .6">60%</p>
<p class="bg-secondary text-white p-3" style="--bs-bg-opacity: .8">80%</p>