Custom Bootstrap Buttons
See Colors Page for additonal colors that can apply to button.

Primary Secondary Success Danger Warning Info Light Dark Azure Jade Orchid Chili Pumpkin Bubblegum Mustard Caramel

Outline Buttons
Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Primary Secondary Success Danger Warning Info Light Dark Azure Jade Orchid Chili Pumpkin Bubblegum Mustard Caramel

Add .btn-lg or .btn-sm for additional sizes.

Large Button Large Button
Default Button Default Button
Small Button Small Button

Active & Disabled States

Active Primary Active Danger Disabled Warning Disabled Info

Block Level Button

Block Button (.btn-block) Block Button (.btn-block)

Round Buttons
Add .btn-round to button or .btn-group-round to button group.

Primary Secondary Success Danger Warning Info
Primary Secondary Success Danger Warning Info

Sizing

Large Button Large Button
Default Button Default Button
Small Button Small Button

Common Buttons

Submit Edit Cancel Delete Upload

Socials

Button Group

Nesting

Flat Buttons
Add .btn-flat to button or .btn-group-flat to button group.

Primary Secondary Success Danger Warning Info
Primary Secondary Success Danger Warning Info

Sizing

Large Button Large Button
Default Button Default Button
Small Button Small Button

Common Buttons

Submit Edit Cancel Delete Upload

Socials

Button Group

Nesting

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

Button Toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Sizing
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
.btn-group-vertical