Background

Background (.bg-*) classes can be used with all theme colors as well as white and transparent. These classes do not affect any text color, so use the .text-* classes for that.

.bg-primary
.bg-secondary
.bg-success
.bg-warning
.bg-danger
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

<div class="p-3 bg-primary text-white">.bg-primary</div>
<div class="p-3 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 bg-success text-white">.bg-success</div>
<div class="p-3 bg-warning text-dark">.bg-warning</div>
<div class="p-3 bg-danger text-white">.bg-danger</div>
<div class="p-3 bg-info text-white">.bg-info</div>
<div class="p-3 bg-light text-dark">.bg-light</div>
<div class="p-3 bg-dark text-white">.bg-dark</div>
<div class="p-3 bg-white text-dark">.bg-white</div>
<div class="p-3 bg-transparent text-dark">.bg-transparent</div>