• Default Theme

  • Night Mode Theme

  • RTL Version

  • Horizontal Version

Epic HR
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Epic HR

Documentation

Mark all as read

  • 7 New Feedback Today

    It will give a smart finishing to your site

  • New User 10:45

    I feel great! Thanks team

  • Server Warning 10:50

    Your connection is not private

  • Issue Fixed 11:05

    WE have fix all Design bug with Responsive

  • 7 New Orders 11:35

    You received a new oder from Tina.
Mark all as read
Profile Settings 6 Inbox Message
Need help? Sign out

Colors

Convey meaning through color with a handful of color utility classes.

Contextual colors

A background fill can be applied to a container using one of the .bg-[color] classes.

Primary
.bg-primary
Secondary
.bg-secondary
Success
.bg-success
Info
.bg-info
Warning
.bg-warning
Danger
.bg-danger 
<div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-primary rounded mr-4"></div>
    <div>
        <strong>Primary</strong><br />
        <code>.bg-primary</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-secondary rounded mr-4"></div>
    <div>
        <strong>Secondary</strong><br />
        <code>.bg-secondary</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-success rounded mr-4"></div>
    <div>
        <strong>Success</strong><br />
        <code>.bg-success</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-info rounded mr-4"></div>
    <div>
        <strong>Info</strong><br />
        <code>.bg-info</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-warning rounded mr-4"></div>
    <div>
        <strong>Warning</strong><br />
        <code>.bg-warning</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-danger rounded mr-4"></div>
    <div>
        <strong>Danger</strong><br />
        <code>.bg-danger</code>
    </div>
</div>

Other colors

Instead of using contextual classes you can use ordinary color names.

Blue
.bg-blue
Azure
.bg-azure
Indigo
.bg-indigo
Purple
.bg-purple
Pink
.bg-pink
Red
.bg-red
Orange
.bg-orange
Yellow
.bg-yellow
Lime
.bg-lime
Green
.bg-green
Teal
.bg-teal
Cyan
.bg-cyan
Gray
.bg-gray 
<div class="row">
    <div class="col-4">
        <div class="d-flex align-items-center mb-4">
        <div class="w-7 h-7 bg-blue rounded mr-4"></div>
        <div>
            <strong>Blue</strong><br />
            <code>.bg-blue</code>
        </div>
    </div>
    <div class="d-flex align-items-center mb-4">
        <div class="w-7 h-7 bg-azure rounded mr-4"></div>
        <div>
            <strong>Azure</strong><br />
            <code>.bg-azure</code>
        </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-indigo rounded mr-4"></div>
    <div>
        <strong>Indigo</strong><br />
        <code>.bg-indigo</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-purple rounded mr-4"></div>
    <div>
        <strong>Purple</strong><br />
        <code>.bg-purple</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-pink rounded mr-4"></div>
    <div>
        <strong>Pink</strong><br />
        <code>.bg-pink</code>
    </div>
    </div>
    </div>
    <div class="col-4">
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-red rounded mr-4"></div>
    <div>
        <strong>Red</strong><br />
        <code>.bg-red</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-orange rounded mr-4"></div>
    <div>
        <strong>Orange</strong><br />
        <code>.bg-orange</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-yellow rounded mr-4"></div>
    <div>
        <strong>Yellow</strong><br />
        <code>.bg-yellow</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-lime rounded mr-4"></div>
    <div>
        <strong>Lime</strong><br />
        <code>.bg-lime</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-green rounded mr-4"></div>
    <div>
        <strong>Green</strong><br />
        <code>.bg-green</code>
    </div>
    </div>
    </div>
    <div class="col-4">
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-teal rounded mr-4"></div>
    <div>
        <strong>Teal</strong><br />
        <code>.bg-teal</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-cyan rounded mr-4"></div>
    <div>
        <strong>Cyan</strong><br />
        <code>.bg-cyan</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-7 h-7 bg-gray rounded mr-4"></div>
    <div>
        <strong>Gray</strong><br />
        <code>.bg-gray</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="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>