Buzzer
buzzerlogo
Documentation Mega Download
RB
Nathan pushed new commit in github.
10 minutes ago
Alice started new task: buzzerUI design.
1 hour ago
Rose deployed new version of NodeJS REST
2 hours ago
 RB
Alice started new task: buzzerUI design.
1 hour ago
Rose deployed new version of NodeJS REST
2 hours ago
Mark all as read
Jane Pearson Administrator
Profile Settings 6 Inbox Message
Need help? Sign out

Subscribe

Accordion

  • Lorem ipsum

    Lorem ipsum dolor sit amet, elit. Placeat, quibusdam! Voluptate nobis

  • Dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipisicing Voluptate nobis

Company

Image Gallery

img
img
img

Documentation

Visitors
2,5,1,8,3,6,7,5
Visits
10,8,9,3,5,8,5
Chats
1,8,5,6,2,4,3,2
Introduction
Alerts Avatars Buttons Breadcrumb Input group List group Modal Pagination Colors Cards Charts Form components Tags Typography
Browse Portfolio

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>