Jane Smith Back

Hey! How's it going?

1:20:42 PM

Not bad... i guess. What about you? Haven't gotten any updates from you in a long time.

1:20:46 PM

Yeah! I've been a bit busy lately. I'll get back to you soon enough.

1:20:54 PM

Alright, take care then.

1:21:01 PM
Current Balance
$71,182
Account Type
Business Plan A
Monthly
$19.99
Upgrade Account
Backend Development
Today 25%
Bug Fix
Tomorrow 17%
Javascript Code
70%
Preparing Documentation
6%
App Development
20%
View all Pending
1.31 GB of 1.50 GB used
87.3%

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

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

Label Buttons

Adding a .btn-label class to the button will increase focus on the attached icon

Color Classes Button Colors Color Classes Alt Button Colors Alt
.btn-primary.btn-label .btn-primary-alt.btn-label
.btn-success.btn-label .btn-success-alt.btn-label
.btn-info.btn-label .btn-info-alt.btn-label
.btn-warning.btn-label .btn-warning-alt.btn-label
.btn-danger.btn-label .btn-danger-alt.btn-label
.btn-inverse.btn-label .btn-inverse-alt.btn-label

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);
}