Toolbar

  1. Home
  2. Extra Components
  3. Toolbar
CardsButtons

Basic

Default

Light Shade

Dark Shade

On Click

Colors

Primary

Danger

Warning

Info

Success

Info-o

Positions

Top

Left

Bottom

Right

Animations

Standard

Flip

Grow

Fly In

Bounce

Grow

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.

# Toolbar Code
1 
<div class="btn-toolbar">...</div>
2 
<div class="btn-toolbar btn-toolbar-primary">...</div>
3 
<div class="btn-toolbar btn-toolbar-danger">...</div>
4 
<div class="btn-toolbar btn-toolbar-warning">...</div>
5 
<div class="btn-toolbar btn-toolbar-info">...</div>
6 
<div class="btn-toolbar btn-toolbar-success">...</div>
7 
<div class="btn-toolbar btn-toolbar-info-o">...</div>
8 
<div class="btn-toolbar btn-toolbar-dark">...</div>
9 
<div class="btn-toolbar btn-toolbar-light">...</div>

Features

  • Straightforward implementation with simple options.
  • Includes a set of css buttons for use with the toolbars.
  • You can run as many toolbars as required.
  • Toolbars can be attached to any element required.
  • Toolbar icons are easily customized through the popular Font Awesome icons.
  • Plenty of options to customized how your toolbar functions including position, animations and events.
  • Toolbars are responsive and follow the buttons on resize.
  • Makes full use of CSS3 for animations.