Accessibility tip: Using color to add meaning only provides a visual indication,
which will not be conveyed to users of assistive technologies like screen readers. Please ensure the
meaning is obvious from the content itself (e.g., the visible text with a
sufficient color contrast) or is
included through alternative means, such as additional text hidden with the
.visually-hidden class.
Background color
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-*
color utilities.
.bg-primary
.bg-primary-subtle
.bg-secondary
.bg-secondary-subtle
.bg-success
.bg-success-subtle
.bg-danger
.bg-danger-subtle
.bg-warning
.bg-warning-subtle
.bg-info
.bg-info-subtle
.bg-light
.bg-light-subtle
.bg-dark
.bg-dark-subtle
.bg-body-secondary
.bg-body-tertiary
.bg-body
.bg-black
.bg-white
.bg-transparent
<div class="p-3 mb-2 bg-primary text-secondary">.bg-primary</div>
<div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div>
<div class="p-3 mb-2 bg-secondary">.bg-secondary</div>
<div class="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div>
<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
<div class="p-3 mb-2 bg-primary text-secondary">.bg-primary</div> <div
class="p-3 mb-2 bg-primary-subtle
text-primary-emphasis">.bg-primary-subtle</div> <div class="p-3 mb-2
bg-secondary">.bg-secondary</div> <div class="p-3 mb-2 bg-secondary-subtle
text-secondary-emphasis">.bg-secondary-subtle</div> <div class="p-3 mb-2
bg-success text-white">.bg-success</div> <div class="p-3 mb-2
bg-success-subtle text-success-emphasis">.bg-success-subtle</div> <div
class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div
class="p-3 mb-2 bg-danger-subtle
text-danger-emphasis">.bg-danger-subtle</div> <div class="p-3 mb-2
bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2
bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div> <div
class="p-3 mb-2 bg-info text-dark">.bg-info</div> <div class="p-3
mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div> <div
class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3
mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div> <div
class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3
mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div> <div
class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div> <div
class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div> <div
class="p-3 mb-2 bg-body text-body">.bg-body</div> <div class="p-3
mb-2 bg-black text-white">.bg-black</div> <div class="p-3 mb-2 bg-white
text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent
text-body">.bg-transparent</div>
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.
Do you need a gradient in your custom CSS? Just add
background-image: var(--bs-gradient);.
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-black
<div class="p-3 mb-2 bg-primary bg-gradient text-secondary">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary bg-gradient">.bg-secondary</div>
<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black</div>
<div class="p-3 mb-2 bg-primary bg-gradient
text-secondary">.bg-primary</div> <div class="p-3 mb-2 bg-secondary
bg-gradient">.bg-secondary</div> <div class="p-3 mb-2 bg-success
bg-gradient text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger
bg-gradient text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning
bg-gradient text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info
bg-gradient text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light
bg-gradient text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark
bg-gradient text-white">.bg-dark</div> <div class="p-3 mb-2 bg-black
bg-gradient text-white">.bg-black</div>
Opacity
How it works
Consider our default .bg-success utility.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
We use an RGB version of our --bs-success (with the value of 25, 135, 84)
CSS variable and attached a second CSS variable, --bs-bg-opacity, for the alpha
transparency (with a default value 1 thanks to a local CSS variable). That means anytime
you use .bg-success now, your computed color value is
rgba(25, 135, 84, 1). The local CSS variable inside each .bg-* class avoids
inheritance issues so nested instances of the utilities don’t automatically have a modified alpha
transparency.
Example
To change that opacity, override --bs-bg-opacity via custom styles or inline styles.
This is default success background
This is 50% opacity success background
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>
<div class="bg-success p-2 text-white">This is default success
background</div> <div class="bg-success p-2" style="--bs-bg-opacity:
.5;">This is 50% opacity success background</div>
Or, choose from any of the .bg-opacity utilities:
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
<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>
<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>