Creating Buttons

The button can be created by adding the class .btn-toolbar to a html element e.g. a div, a, span, button, while the colors can be controller with different CSS classes.

<div class="btn-toolbar">...</div>

<div class="btn-toolbar btn-toolbar-primary">...</div>

<div class="btn-toolbar btn-toolbar-danger">...</div>

<div class="btn-toolbar btn-toolbar-warning">...</div>

<div class="btn-toolbar btn-toolbar-info">...</div>

<div class="btn-toolbar btn-toolbar-success">...</div>

<div class="btn-toolbar btn-toolbar-info-o">...</div>

<div class="btn-toolbar btn-toolbar-dark">...</div>

<div class="btn-toolbar btn-toolbar-light">...</div>

Content

This should be the ID of the element which contains your toolbar icons.

$('#button').toolbar({
content: '#toolbar-options',
});

Position

The toolbar can be positioned to the top, left, right or bottom of the element. Set the value of position to where you want the toolbar to appear.

$('#button').toolbar({
content: '#toolbar-options',
position: 'bottom'
});

Style

The toolbar color can be set through the style option. It accepts the same values as the css buttons. You can mix and match styles for the buttons and toolbars to create any color combo you want (but genrally the same styles go together).

$('#button').toolbar({
content: '#toolbar-options',
position: 'bottom',
style: 'primary'
});

Animation

The toolbar animation can be set through the animation option. There are five different options for the animation which can be viewed in the example above. From left to right the options are standard, flip, grow, flyin, and bounce.

$('#button').toolbar({
content: '#toolbar-options',
position: 'bottom',
style: 'primary',
animation: 'flip'
});