John Doe
PHP DeveloperColor System Warning Color
One stop solution for perfect admin dashboard!
Warning 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.
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-warning bg-warning-100 btn-labeled">Submit<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-warning bg-warning-300 btn-labeled">Submit<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-warning bg-warning btn-labeled">Submit<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-warning bg-warning-500 btn-labeled">Submit<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-warning bg-warning-600 btn-labeled">Submit<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button> <button type="button" class="btn btn-warning bg-warning-700 btn-labeled">Submit<span class="btn-label btn-label-right"><i class="fa fa-check"></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-warning-100" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div> <div class="alert alert-default bg-warning-300" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div> <div class="alert alert-default bg-warning" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div> <div class="alert alert-default bg-warning-500" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div> <div class="alert alert-default bg-warning-600" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div> <div class="alert alert-default bg-warning-700" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div>