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