Color System Primary Color

One stop solution for perfect admin dashboard!

Toggle Code!
  • Home
  • Color System - Primary
Talk to usSettings

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. 

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

Useful Sidebar

Code for help is added within the main page. Check for code below the example.

You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.

This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.