BBS5 Backgrounds
Learn about Bootstrap 5 background utilities and gradients.
BS5 Backgrounds
Bootstrap 5 includes background color utilities as discussed in the Colors chapter.
Additionally, Bootstrap 5 has support for gradients and opacity.
Background Gradient
Use the .bg-gradient class to add a linear gradient to the background color. The gradient starts with a semi-transparent white which fades out to the bottom.
Examples
Background Gradient
html/cssAdding a subtle gradient to background colors.
<div class="p-3 mb-2 bg-primary bg-gradient text-white">Primary Gradient</div>
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">Secondary Gradient</div>
<div class="p-3 mb-2 bg-success bg-gradient text-white">Success Gradient</div>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">Danger Gradient</div>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">Warning Gradient</div>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">Info Gradient</div>
<div class="p-3 mb-2 bg-light bg-gradient text-dark">Light Gradient</div>
<div class="p-3 mb-2 bg-dark bg-gradient text-white">Dark Gradient</div>Background Opacity
html/cssControlling background opacity.
<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-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>