Background

Background Basic

.bg-primary

.bg-secondary

.bg-tertiary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.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-tertiary text-white">.bg-tertiary</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 inverse-light bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 inverse-dark bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Background Gradient

.bg-gradient-primary

.bg-gradient-primary-left

.bg-gradient-primary-upright

.bg-gradient-primary-right

.bg-gradient-secondary

.bg-gradient-dark

.bg-gradient-light-right

.bg-gradient-light-left

.bg-gradient-light-upright

<div class="p-4 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-4 mb-2 bg-gradient-primary-left text-white">.bg-gradient-primary-left</div>
<div class="p-4 mb-2 bg-gradient-primary-upright text-white">.bg-gradient-primary-upright</div>
<div class="p-4 mb-2 bg-gradient-primary-right text-white">.bg-gradient-primary-right</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>
<div class="p-3 mb-2 bg-gradient-light-right">.bg-gradient-light-right</div>
<div class="p-3 mb-2 bg-gradient-light-left">.bg-gradient-light-left</div>
<div class="p-3 mb-2 bg-gradient-light-upright">.bg-gradient-light-upright</div>

Base Theme

Components

Section

MegaMenu heading

Background

Background Basic

Background Gradient