Colors

Theme Colors

Primary

#754ffe

Secondary

#79758f

Success

#19cb98

Danger

#e53f3c

Warning

#ffaa46

Info

#6ad2ff

Light

#f5f4f8

Dark

#18113C

Theme Light Colors

Primary

#e3dcff

Secondary

#e4e3e9

Success

#d1f5ea

Danger

#fad9d8

Warning

#ffeeda

Info

#e1f6ff

Dark

#d1cfd8

Theme Dark Colors

Primary

#593cc1

Secondary

#5c596d

Success

#139a74

Danger

#ae302e

Warning

#c28135

Info

#51a0c2

Theme Gray Colors

gray-100

#f5f4f8

gray-200

#ecebf1

gray-300

#e8e7ed

gray-400

#beb9cd

gray-500

#a8a3b9

gray-600

#79758f

gray-700

#5c5776

gray-800

#413C5E

gray-900

#18113C

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

Design
HTML

.bg-primary

.bg-secondary

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

Background Gradient color

By adding a .bg-light-gradient, .bg-light-gradient-top, .bg-light-gradient-bottom, .bg-gradient-mix-shade class, a linear gradient is added as background image to the backgrounds.

Design
HTML

.bg-light-gradient

.bg-light-gradient-top

.bg-light-gradient-bottom

.bg-gradient-mix-shade

<div class="p-6 mb-3 bg-light-gradient text-dark rounded-3">.bg-light-gradient</div>

                              <div class="p-6 mb-3 bg-light-gradient-top text-dark rounded-3">.bg-light-gradient-top</div>
                              <div class="p-6 mb-3 bg-light-gradient-bottom text-dark rounded-3">.bg-light-gradient-bottom</div>
                              <div class="p-6 mb-3 bg-gradient-mix-shade text-white rounded-3">.bg-gradient-mix-shade</div>