Buttons

States

Buttons will appear pressed when active. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

  • Normal #404E67
  • Hover #313c4f
  • Active #2c3648
  • Disabled #87909f
  • Normal #00B5B8
  • Hover #26C0C3
  • Active #009DA0
  • Disabled #5ACFD1
  • Normal #16D39A
  • Hover #39DAA9
  • Active #0CC27E
  • Disabled #68E2BD
  • Normal #FF7588
  • Hover #FF8A9A
  • Active #FF586B
  • Disabled #FFA5B2
  • Normal #2DCEE3
  • Hover #4DD5E7
  • Active #1CBCD8
  • Disabled #77DFED
  • Normal #FFA87D
  • Hover #FFB591
  • Active #FF8D60
  • Disabled #FFC6AB

Basic Buttons

Buttons

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Square Buttons

Use .square class for square buttons.

Round Buttons

Use .round class for round buttons.

Basic 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.

Buttons with Icon

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Button group with icon

Button group with icons and text.

Icon Buttons

Simple Icon Button

Use .btn-icon.btn-pure classes for only icon buttons

Icon Button group

Icon Button group without text.

Combine sets of button groups into Button toolbar for more complex components.

Sizes

Add .btn-lg or .btn-sm for Fancy larger or smaller buttons size.

Buttons with Icons in different sizes

Button Group Sizes

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group.

Button Group with Icons in different sizes

Block level buttons

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements.

Link

Outline Buttons

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

Outline buttons

Use a class .btn-outline-* to quickly create a outline button.

Square buttons

Use a class .square with outline button class to create square outline button.

Round buttons

Use a class .round with outline button class to create round outline button.

Outline Button group

Outline button group

Outline buttons with Icons

Outline Buttons with icon.

Outline Button group with icon

Outline button group with icons and text.

Outline Icon Buttons

Outline Icon Buttons.

Outline Icon Button group

Icon Button group without text.

Combine sets of button groups into Button toolbar for more complex components.

Sizes

Add .btn-lg or .btn-sm for Fancy larger or smaller buttons size.

Buttons with Icons in different sizes

Button Group Sizes

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group.

Button Group with Icons in different sizes

Block level buttons

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Nesting Button group

Place a .btn-group within another .btn-group for dropdown menu buttons.

Nesting Button group with outline

Vertical variation

Make a set of buttons appear vertically.

Vertical variation with different colors

Vertical variation with Outlines

Vertical variation with Outlines