Backgrounds
Dokumentasi Bootstrap Background.bg-primary
.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-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
Gunakan .bg-img-start
untuk fokus posisi dari atas.
Gunakan .bg-img-center
untuk fokus posisi rata-tengah.
Gunakan .bg-img-end
untuk fokus posisi dari bawah.