Contents
When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of level AA.
Quick reference
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set
color, so in some cases you’ll want to use .text-bg-* color utilities.| Class | Color |
|---|---|
bg-body | bg-body |
bg-transparent | bg-transparent bg-checkered |
bg-white | bg-white |
bg-black | bg-black |
bg-primary | bg-primary |
bg-primary-subtle | bg-primary-subtle |
bg-discovery | bg-discovery |
bg-discovery-subtle | bg-discovery-subtle |
bg-secondary | bg-secondary |
bg-secondary-subtle | bg-secondary-subtle |
bg-success | bg-success |
bg-success-subtle | bg-success-subtle |
bg-danger | bg-danger |
bg-danger-subtle | bg-danger-subtle |
bg-warning | bg-warning |
bg-warning-subtle | bg-warning-subtle |
bg-info | bg-info |
bg-info-subtle | bg-info-subtle |
bg-light | bg-light |
bg-light-subtle | bg-light-subtle |
bg-dark | bg-dark |
bg-dark-subtle | bg-dark-subtle |
bg-body-secondary | bg-body-secondary |
bg-body-tertiary | bg-body-tertiary |
Basic usage
Setting the background color
Control the background color of an element using the bg-{color} utilities.
<button class="btn text-bg-warning ...">
Save changes
</button>
Setting the background gradient
By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
<button class="btn text-bg-primary bg-gradient ...">
.bg-gradient
</button>
Changing the opacity
Control the opacity of an element’s background color using the color opacity .bg-opacity-* utilities.
bg-opacity-100
bg-opacity-100
bg-opacity-75
bg-opacity-50
bg-opacity-25
bg-opacity-10
<div class="bg-purple bg-opacity-100"></div>
<div class="bg-purple bg-opacity-75"></div>
<div class="bg-purple bg-opacity-50"></div>
...
Edit this page on Github
Last updated on April 6, 2024