Buttons

Button Variants

Button Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Extra Small	Small	Regular	Large
Extra Small	Small	Regular	Large
Extra Small	Small	Regular	Large
Disabled	Disabled	Disabled	Disabled
Disabled	Disabled	Disabled	Disabled

Button Dropdowns

Single and Split Button Dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

Single	Single Alt	Split	Split Alt
Action Another action Something else here Separated link	Action Another action Something else here Separated link	Dropdown Action Another Action Something else here Separated Link	Dropdown Action Another Action Something else here Separated Link

Button Groups

Horizontal Button Group

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group.

Horizontal Group	With Icons	Multiple Button Groups

Vertical Button Group

Make a set of buttons appear vertically stacked rather than horizontally by putting it in .btn-group-vertical.

Vertical Group	With Dropdown	With Icons	Multiple Button Groups
	Dropdown link Dropdown link

Button Color Classes

Example Color Classes

Here are some basic button colors and custom colors that comes in two different styles. Simply use any color class you like from the table above.

Color Classes	Button Colors	Color Classes Alt	Button Colors Alt
`.btn-default`	Default	`.btn-default-alt`	Default
`.btn-primary`	Primary	`.btn-primary-alt`	Primary
`.btn-success`	Success	`.btn-success-alt`	Success
`.btn-info`	Info	`.btn-info-alt`	Info
`.btn-warning`	Warning	`.btn-warning-alt`	Warning
`.btn-danger`	Danger	`.btn-danger-alt`	Danger
`.btn-inverse`	Inverse	`.btn-inverse-alt`	Inverse
`.btn-brown`	Brown	`.btn-brown-alt`	Brown
`.btn-sky`	Sky Blue	`.btn-sky-alt`	Sky Blue
`.btn-midnightblue`	Midnight Blue	`.btn-midnightblue-alt`	Midnight Blue
`.btn-orange`	Orange	`.btn-orange-alt`	Orange
`.btn-green`	Green	`.btn-green-alt`	Green
`.btn-magenta`	Magenta	`.btn-magenta-alt`	Magenta

Custom Colors

Make your own!

Create as many button colors as you want easily with the included LESS Mixins in just three lines! For example if you want to create other colored buttons, simply add this line in the buttons.less file

.btn-COLORNAME {
  .button-variant(#TEXTCOLOR, #BACKGROUNDCOLOR, #BORDERCOLOR);
}

or, for alternate buttons

.btn-COLORNAME-alt {
  .button-variant-alt(#TEXTCOLOR, #BACKGROUNDCOLOR, #BORDERCOLOR);
}

Account Summary

$71,182

Business Plan A

$19.99

Online Contacts (5)

Pending Tasks (5)

Storage Space

Server Status