User Crush
Card image cap
Daniel Kristeen

795 Folsom Ave, Suite 600 San Francisco, 94107

3265
Post
1358
Followers
10K
Likes
View More Another link

Documentation

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>