Getting started!

Buttons

General Buttons

Use btn btn-light classes to quickly create a General button.

Rounded Buttons

Use btn btn-light btn-rounded classes to quickly create a Disabled button.

Disabled Buttons

Use btn btn-light disabled classes to quickly create a Disabled button.

Raised Buttons

Use btn btn-light btn-raised classes to quickly create a Raised button.

Rounded Raised Buttons

Use btn btn-light btn-rounded btn-raised classes to quickly create a Rounded Raised button.

Outline Buttons

Use btn btn-outline-light class to quickly create an Outline button.

Rounded Outline Buttons

Use btn btn-outline-light btn-rounded classes to quickly create a Rounded Outline button.

Size Options

Use btn-lg btn-sm btn-xs classes

Button Blocks

Use btn-block class

Common Icon Buttons

Just add icon in i tag with left or right classes and text in span thats it

Social Icon Buttons

Use for example btn btn-facebook


With Circle btn btn-facebook btn-circle

Social Icon Buttons with labels

Use for example btn btn-facebook. Wrap the icon in span with btn-label class.

Grouped Buttons

Single Button Group

Basic example of bootstrap button groups. Wrap a series of buttons with btn in btn-group.

Button toolbar

A button bar is a group of button groups, perfect for situations where you want groups of actions that are all related to a similar element or page

Size Options

Instead of applying button sizing classes to every button in a group, just add btn-group-* to each btn-group, including each one when nesting multiple groups.

Nesting

Place a btn-group within another btn-group when you want dropdown menus mixed with a series of buttons.

Vertical Button Group

Make a set of buttons appear vertically stacked rather than horizontally.

Vertical Button Group With Icon

You are keen to use original alternatives? Here you come. It's designed to use both vertical and horizontal ways.