Buttons

  1. Home
  2. Components
  3. 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 #DDDDDD
  • Hover #F3F7F9
  • Active #CCD5DB
  • Disabled #CCD5DB
  • Normal #967ADC
  • Hover #AC92EC
  • Active #7652D1
  • Disabled #BBA9E8
  • Normal #37BC9B
  • Hover #48CFAD
  • Active #2B957A
  • Disabled #7DD3BE
  • Normal #DA4453
  • Hover #ED5565
  • Active #C42737
  • Disabled #E7868F
  • Normal #3BAFDA
  • Hover #4FC1E9
  • Active #2494BE
  • Disabled #80CBE7
  • Normal #F6BB42
  • Hover #FFCE54
  • Active #F4A911
  • Disabled #F9D384

Basic Buttons

buttons

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

Single button dropdowns

Button dropdowns

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Split Buttons

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

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.

Sizes

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

Button Dropdowns Sizes

Button dropdowns work with buttons of all sizes.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Button Group Sizes

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

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.

Single outline button dropdowns

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Split Outline button dropdowns with dropdown background

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Split Outline button dropdowns

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Outline Button group

Outline button group

Sizes

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

Outline Button Dropdowns Sizes

Button dropdowns work with buttons of all sizes.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Button Group Sizes

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

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.

Dropdown link Dropdown link

Vertical variation

Make a set of buttons appear vertically.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link