Default colors

Use bootstrap .btn class for links, buttons and inputs (used .min-width class for 130px minimal button width).

Default Button Primary Button Info Button Success Button Warning Button Danger Button
Outlined colors

Use .btn-o class together with the .btn.

Default Button Primary Button Info Button Success Button Warning Button Danger Button
Options
Sizes

Use .btn-lg, .btn-sm, .btn-xs for fast change button sizes.

Rounded

Add .btn-rounded class for adding the rounded borders.

Block

.btn-block will make your button full-width unit.

Primary Button Block
States

:active or .active

Primary Button Danger Button

:focus or .focus (:hover or .hover)

Primary Button Danger Button

:disabled or .disabled

Primary Button Danger Button
Button Colors
Button States
Additional
Button Content
Button Groups

Wrap a series of buttons with .btn in .btn-group.

Combine sets of .btn-group into a .btn-toolbar for more complex components.

Use .btn-group-rounded class for adding the rounded borders.

Separate buttons with special class .btn-group-separators to .btn-group

Button Groups Sizing

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

.btn-group-lg

.btn-group-sm

.btn-group-xs

Button Groups Vertical Variation

Make a set of buttons appear vertically stacked rather than horizontally (.btn-group-vertical).

Sizes (.btn-* classes)
Nesting

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

Vertical variation