Buttons

  1. Elements
  2. Buttons

Default Button

Use any of the available button classes to quickly create a styled button.

Default Primary Secondary Success Info Warning Danger Link

light buttons

Make buttons the light to any .btn element. <a>s don’t support the light attribute, so you must add the .light class to make it visually appear light.

Default Primary Secondary Success Info Warning Danger

Disabled buttons

Make buttons the disabled to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Primary Secondary Success Info Warning Danger

Color variations

The classic button, in different colors.

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan Gray Dark gray

Border buttons

The default modifier classes with the .btn-outline-*

default Primary Secondary Success Info Warning Danger

Radius buttons

Add .btn-radius to button to remove border-radius.

Default Primary Secondary Success Info Warning Danger

Radius light buttons

Add .btn-radius to button to remove border-radius.

Default Primary Secondary Success Info Warning Danger

Rounded buttons

Add .btn-pill class to any button more rounded.

Default Primary Secondary Success Info Warning Danger

Rounded buttons

Add .btn-pill class to any button more rounded.

Default Primary Secondary Success Info Warning Danger

Min-Width Buttons

Add .btn, .w-xs, .w-sm, .w-md, .w-lg, classes to quickly create a styled button..

Button size

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

Social buttons

Social buttons

You can use only icons.

Icon buttons

Icon only button. Add .btn-icon class to remove unnecessary button.

Loading button

Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.



Button dropdown

Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

Action Another action
Action Another action
Action Another action

List of buttons

You can now create a list of buttons with the .btn-list container.

Save changes Save and continue Cancel

Use the .text-center modifiers to alter the alignment.

Save changes Save and continue Cancel

Use the .text-end modifiers to alter the alignment.

Save changes Save and continue Cancel

Basic Button Group

Use any of the available in .btn-group classes to quickly create a styled button.

Left Middle Right

Button Toolbar

Combine sets of button groups into button toolbars for more complex components.

Outline Button Group

Use any of the available .btn .btn-outline- in .btn-group classes to quickly create a styled button.

Left Middle Right

Min-Width Buttons

Add .btn, .w-xs, .w-sm, .w-md, .w-lg, classes to quickly create a styled button..

Min-XS Min-SM Min-MD Min-LG

Checkbox Button Group

Use any of the available .btn in .btn-group classes to quickly create a styled button.

Radio Button Group

Use any of the available .btn in .btn-group classes to quickly create a styled button.

Button Group Sizes

Use any of the available .btn-group-* in .btn-group classes to quickly create a styled button.

Left Middle Right

Left Middle Right

Left Middle Right

Vertical Button Group

Use any of the available .btn-group-vertical classes to quickly create a styled button.

Button Button
Button Button