Basic Buttons

  1. Home
  2. Buttons

Default

Use any of the available .btn btn- classes to quickly create a styled button.
Default Primary Secondary Success Info Warning Danger Link

Disable Default Button

Use any of the available .btn btn- classes you must add the .disabled class to make it visually appear disabled.
Default Primary Secondary Success Info Warning Danger Link

Outline Button

Use any of the available .btn-outline- classes to quickly create a styled button.
Default Primary Secondary Success Info Warning Danger

Rounded Button

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

Default Primary Secondary Success Info Warning Danger

Light Button

Use any of the available .btn-[yourcolor]-light classes to quickly create a styled button.
Default Primary Secondary Success Info Warning Danger

Button with icon

Basic buttons are traditional buttons with borders color opitons.

Icon buttons

Icon only button. Add .btn-icon classes to quickly create a styled button..

Button Tags

Add .btn, <input>, <a>classes to quickly create a styled button..
Link

Toggle buttons

Add data-bs-toggle="button" to toggle a button .active class & required aria-pressed="true".

Color variations

The classic button, in different colors.
Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan Gray Dark gray

Social buttons

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.

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

Basic Button Group

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

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.

Min-Width Buttons

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

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.


Vertical Button Group

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