Default Button Style

Use the button classes on an <a>,<button>,or <input>element.

Rounded Button

Add .btn-roundedto get clean rounded button.

Outline Button

Add .btn-outline,.btn-roundedto get clean outline rounded button.

Outline Button

Add .btn-outline,.btn-roundedto get clean outline rounded button.

Flat Button

Add .btn-flatto get clean flat button.

Button Addon

Add .btn-addon,.btn-addon ito get clean button addon.

Button Size

Add .btn-lg,.btn-md,.btn-sm,or .btn-xsfor additional sizes.

Button Addon Size

Add .btn-addon.btn-lg,.btn-addon.btn-lg i for button addon size.

Block Level Buttons

Add class .btn-blockto create a block level button:

Active/Disabled Buttons

The class .activemakes a button appear pressed,and the class .disabledmakes a button unclickable:

Button Groups

Use a <div>element with class .btn-groupto create a button group:

Vertical Button Groups

Use the class .btn-group-verticalto create a vertical button group:

Justified Button Groups

To span the entire width of the screen,use the .btn-group-justifiedclass:

AppleSamsungSony

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus:

Split Button Dropdowns

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus: