Backgrounds
Convey meaning through background-color and add decoration with gradients.
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-dark
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-primary-dark text-white">.bg-primary-dark</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
Background soft color
.bg-soft-primary
.bg-soft-primary-light
.bg-soft-secondary
.bg-soft-success
.bg-soft-danger
.bg-soft-warning
.bg-soft-info
.bg-soft-light
.bg-soft-dark
.bg-soft-body
.bg-soft-white
<div class="p-3 mb-2 bg-soft-primary text-primary">.bg-soft-primary</div>
<div class="p-3 mb-2 bg-soft-primary-light text-primary">.bg-soft-primary-light</div>
<div class="p-3 mb-2 bg-soft-secondary text-secondary">.bg-soft-secondary</div>
<div class="p-3 mb-2 bg-soft-success text-success">.bg-soft-success</div>
<div class="p-3 mb-2 bg-soft-danger text-danger">.bg-soft-danger</div>
<div class="p-3 mb-2 bg-soft-warning text-warning">.bg-soft-warning</div>
<div class="p-3 mb-2 bg-soft-info text-info">.bg-soft-info</div>
<div class="p-3 mb-2 bg-soft-light text-light">.bg-soft-light</div>
<div class="p-3 mb-2 bg-soft-dark text-dark">.bg-soft-dark</div>
<div class="p-3 mb-2 bg-soft-body text-body">.bg-soft-body</div>
<div class="p-3 mb-2 bg-soft-white text-white">.bg-soft-white</div>
Background gradient
.gradient-y-lg-dark
.gradient-radial-sm-primary
<div class="p-3 mb-2 gradient-y-lg-dark text-white">.gradient-y-lg-dark</div>
<div class="p-3 mb-2 gradient-radial-sm-primary text-white">.gradient-radial-sm-primary</div>
Background image hero
Specify the position of a background image:
Use .bg-img-start for top-aligned position.
<div class="bg-img-start" style="background-image: url(../assets/img/documentation/img7.jpg); height: 250px;"></div>
Use .bg-img-center for center-aligned position.
<div class="bg-img-center" style="background-image: url(../assets/img/documentation/img7.jpg); height: 250px;"></div>
Use .bg-img-end for bottom-aligned position.