.bg-primary
.bg-info
.bg-secondary
.bg-warning
.bg-success
.bg-danger
Example: <div class="d-flex align-items-center mb-2 mt-2">
<div class="w-7 h-7 bg-primary rounded mr-4"></div>
<div>
<strong>Primary</strong><br />
<code>.bg-primary</code>
</div>
</div>
.bg-blue
.bg-azure
.bg-indigo
.bg-purple
.bg-pink
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-gray
.bg-gray-dark
.bg-secondary
Example: <div class="d-flex align-items-center mb-2 mt-2">
<div class="w-7 h-7 bg-blue rounded mr-4"></div>
<div>
<strong>Blue</strong><br />
<code>.bg-blue</code>
</div>
</div>
.bg-gradient-primary
.bg-gradient-info
.bg-gradient-warning
.bg-gradient-success
.bg-gradient-danger
Example: <div class="d-flex align-items-center mb-2 mt-2">
<div class="w-7 h-7 bg-gradient-primary rounded mr-4"></div>
<div>
<strong>Primary</strong><br />
<code>.bg-gradient-primary</code>
</div>
</div>