A background fill can be applied to a container using one of the .bg-[color]
classes.
.bg-primary
.bg-info
.bg-secondary
.bg-warning
.bg-success
.bg-danger
<divclass="d-flex align-items-center mb-2 mt-2"><divclass="w-7 h-7 bg-primary rounded mr-4"></div><div><strong>Primary</strong><br/><code>.bg-primary</code></div></div><divclass="d-flex align-items-center mb-2 mt-2"><divclass="w-7 h-7 bg-secondary rounded mr-4"></div><div><strong>Secondary</strong><br/><code>.bg-secondary</code></div></div><divclass="d-flex align-items-center mb-2 mt-2"><divclass="w-7 h-7 bg-success rounded mr-4"></div><div><strong>Success</strong><br/><code>.bg-success</code></div></div><divclass="d-flex align-items-center mb-2 mt-2"><divclass="w-7 h-7 bg-info rounded mr-4"></div><div><strong>Info</strong><br/><code>.bg-info</code></div></div><divclass="d-flex align-items-center mb-2 mt-2"><divclass="w-7 h-7 bg-warning rounded mr-4"></div><div><strong>Warning</strong><br/><code>.bg-warning</code></div></div><divclass="d-flex align-items-center mb-2 mt-2"><divclass="w-7 h-7 bg-danger rounded mr-4"></div><div><strong>Danger</strong><br/><code>.bg-danger</code></div></div>
Instead of using contextual classes you can use ordinary color names.
.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
<divclass="row"><divclass="col-4"><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-blue rounded mr-4"></div><div><strong>Blue</strong><br/><code>.bg-blue</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-azure rounded mr-4"></div><div><strong>Azure</strong><br/><code>.bg-azure</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-indigo rounded mr-4"></div><div><strong>Indigo</strong><br/><code>.bg-indigo</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-purple rounded mr-4"></div><div><strong>Purple</strong><br/><code>.bg-purple</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-pink rounded mr-4"></div><div><strong>Pink</strong><br/><code>.bg-pink</code></div></div></div><divclass="col-4"><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-red rounded mr-4"></div><div><strong>Red</strong><br/><code>.bg-red</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-orange rounded mr-4"></div><div><strong>Orange</strong><br/><code>.bg-orange</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-yellow rounded mr-4"></div><div><strong>Yellow</strong><br/><code>.bg-yellow</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-lime rounded mr-4"></div><div><strong>Lime</strong><br/><code>.bg-lime</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-green rounded mr-4"></div><div><strong>Green</strong><br/><code>.bg-green</code></div></div></div><divclass="col-4"><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-teal rounded mr-4"></div><div><strong>Teal</strong><br/><code>.bg-teal</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-cyan rounded mr-4"></div><div><strong>Cyan</strong><br/><code>.bg-cyan</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-gray rounded mr-4"></div><div><strong>Gray</strong><br/><code>.bg-gray</code></div></div><divclass="d-flex align-items-center mb-4"><divclass="w-7 h-7 bg-gray-dark rounded mr-4"></div><div><strong>Dark gray</strong><br/><code>.bg-gray-dark</code></div></div></div></div>