#### Color System Primary Color

One stop solution for perfect admin dashboard!

Toggle Code!

#### Primary Palette

We have created color palettes so that it will be easy for you to use this admin template. You can change these values easily with provided sass file. You can also directly use these classes.

Primary 100
`.bg-primary-100`
Primary 300
`.bg-primary-300`
Primary
`.bg-primary`
Primary 500
`.bg-primary-500`
Primary 600
`.bg-primary-600`
Primary 700
`.bg-primary-700`

#### Buttons

You can use above color palette to style your buttons. Just use classes as mentioned above and change button colors. Click 'Toggle Code' button at top right corner of this page to see code for below buttons.

    <button type="button" class="btn btn-primary bg-primary-100 btn-labeled">Send Email<span class="btn-label btn-label-right"><i class="fa fa-send-o"></i></span></button>

    <button type="button" class="btn btn-primary bg-primary-300 btn-labeled">Send Email<span class="btn-label btn-label-right"><i class="fa fa-send-o"></i></span></button>

    <button type="button" class="btn btn-primary bg-primary btn-labeled">Send Email<span class="btn-label btn-label-right"><i class="fa fa-send-o"></i></span></button>

    <button type="button" class="btn btn-primary bg-primary-500 btn-labeled">Send Email<span class="btn-label btn-label-right"><i class="fa fa-send-o"></i></span></button>

    <button type="button" class="btn btn-primary bg-primary-600 btn-labeled">Send Email<span class="btn-label btn-label-right"><i class="fa fa-send-o"></i></span></button>

    <button type="button" class="btn btn-primary bg-primary-700 btn-labeled">Send Email<span class="btn-label btn-label-right"><i class="fa fa-send-o"></i></span></button>

#### Alerts

You can use above color palette to style your alerts. Just use classes as mentioned above and change alert background colors. Click 'Toggle Code' button at top right corner of this page to see code for below alerts.

Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-default bg-primary-100" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>

Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-default bg-primary-300" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>

Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-default bg-primary" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>

Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-default bg-primary-500" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>

Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-default bg-primary-600" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>

Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-default bg-primary-700" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>