Toolbar

  1. Home
  2. Extra Components
  3. Toolbar
Bootstrap CardsButtons Extended

Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using icons and provides flexibility around the toolbars display and number of icons.

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.