1. Home
  2. Components
  3. Buttons

Buttons

Bootstrap’s custom button styles can be used for actions in forms, dialogs, and more

Advanced CardButtons Extended

Buttons include support for a handful of contextual variations, sizes, states, and more. Group a series of buttons together on a single line with the button group.

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.

Round Buttons

Use .btn-round class to button for Round Buttons.

Square Buttons

Use .btn-square class to button for Square Buttons.

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
Round Button dropdowns

Use .btn-round class to button for Round Buttons.

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
Square Button dropdowns

Use .btn-square class to button for Square Buttons.

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
Round Split Button dropdowns

Use .btn-round class to button for Round Buttons.

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
Square Split Button dropdowns

Use .btn-square class to button for Square Buttons.

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.

Wrap a series of buttons with .btn in .btn-group & .btn-round class for round button.

Wrap a series of buttons with .btn in .btn-group & .btn-square class for square button.

Buttons with Icon

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

Use .btn-round class & icon text to button for Round Icon Buttons.

Use .btn-square class & icon text to button for Square Icon Buttons.

Button dropdowns with icons

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
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
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 button dropdowns with icon

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
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
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 with icon

Button group with icons and text.

Round button group with icons and text.

Square button group with icons and text.

Icon Buttons

Simple Icon Button

Use .btn-icon.btn-round classes for round button icon

Use .btn-icon.btn-square classes for square button icon

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

Icon 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
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
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 icon 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
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
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

Icon Button group

Icon Button group without text.

Round Icon Button group without text.

Square 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

Round Buttons in different sizes

Square Buttons in different sizes

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

Buttons with Icons in different 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

Square Buttons in different 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

Round Buttons in different 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.

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.

Use a class .btn-round for round outlined button.

Use a class .btn-square for square outlined 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
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
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
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
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
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
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

Round Outline button group.

Square Outline button group.

Outline buttons with Icons

Outline Buttons with icon.

Round Outline Buttons with icon.

Square Outline Buttons with icon.

Split Outline button dropdowns with icon & dropdown outline

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
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
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 with icon

Outline button group with icons and text.

Round Outline button group with icons and text.

Square Outline button group with icons and text.

Outline Icon Buttons

Outline Icon Buttons.

Round Outline Icon Buttons.

Square Outline Icon Buttons.

Outline Icon Button group

Icon Button group without text.

Round Icon Button group without text.

Square 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

Round Buttons in different sizes

Square Buttons in different sizes

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

Round Buttons with Icons in different 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

Icon Buttons in different 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

Square Icon Buttons in different 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.

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.

Dropdown link Dropdown link

Nesting Button group with outline

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

Vertical variation with different colors

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

Vertical variation with Outlines

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

Vertical variation with Outlines

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