@@include("../partials/doc-sidenav.html")

Colors

Theme Colors

Primary

#624BFF

Secondary

#637381

Success

#198754

Danger

#dc3545

Warning

#ffc107

Info

#0dcaf0

Light

#F9FAFB

Dark

#161C24

Theme Light Colors

Primary

#E0DCFE

Secondary

#e9ecef

Success

#EAF6EC

Danger

#FBEBEC

Warning

#FFF3CD

Info

#E7FAFE

Dark

#d1cfd8

Theme Dark Colors

Primary

#593cc1

Secondary

#5c596d

Success

#139a74

Danger

#ae302e

Warning

#c28135

Info

#51a0c2

Theme Gray Colors

gray-100

#F9FAFB

gray-200

#F4F6F8

gray-300

#DFE3E8

gray-400

#C4CDD5

gray-500

#919EAB

gray-600

#637381

gray-700

#454F5B

gray-800

#212B36

gray-900

#161C24

.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>