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
Primary toolbar
success toolbar
Info toolbar
Warning toolbar
Danger toolbar
Position Toolbar
Top toolbar
Left toolbar
bottom toolbar
right toolbar
on click 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
Standard toolbar
Flip toolbar
Grow toolbar
fly in toolbar
bounce 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>