Jquery Default Toolbar
Light toolbar
Dark toolbar
HTML Usage add button color .btn-toolbar-light or .btn-toolbar-dark
to toolbar
<div class="col-md-6 col-sm-6 m-b-30">
<h6>Light toolbar</h6>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-default btn-toolbar-light" id="light-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 m-b-30">
<h6>Dark toolbar</h6>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-inverse btn-toolbar-dark" id="dark-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
Colorful Toolbar
Position Toolbar
HTML Usage add button color id="top-toolbar" or id="left-toolbar"
e.t.c to toolbar
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">Top toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-primary btn-toolbar-primary" id="top-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">Left toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-success btn-toolbar-success" id="left-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">bottom toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-info btn-toolbar-info" id="bottom-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">right toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-warning btn-toolbar-warning" id="right-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-12 col-sm-6 m-b-30">
<div class="sub-title">on click toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-danger btn-toolbar-danger" id="click-toolbar" data-toolbar-event="click"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
Animation Toolbar
HTML Usage add button color id="standard-toolbar", id="grow-toolbar", id="bounce-toolbar" or id="flip-toolbar"
e.t.c to toolbar
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">Standard toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-primary btn-toolbar-primary" id="standard-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">Flip toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-success btn-toolbar-success" id="flip-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">Grow toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-info btn-toolbar-info" id="grow-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-6 col-sm-6 m-b-30">
<div class="sub-title">fly in toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-warning btn-toolbar-warning" id="flyin-toolbar"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-12 col-sm-6 m-b-30">
<div class="sub-title">bounce toolbar</div>
<div class="tool-box">
<div data-toolbar="user-options" class="btn-toolbar btn-danger btn-toolbar-danger" id="bounce-toolbar" data-toolbar-event="click"><i class="fa fa-cogs"></i></div>
<div class="clear"></div>
</div>
</div>