Default Button

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

Disable Default Button

Use any of the available .btn btn- classes you must add the .disabled class to make it visually appear disabled.

Rounded Button

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

Outline Button

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

Light Button

Use any of the available .btn-[yourcolor]-light classes to quickly create a styled button.

Button with icon

Basic buttons are traditional buttons with borders color opitons.

Button size

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

Block Button

Add .d-grid or .gap-2 for additional sizes.

Icon buttons

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

Social buttons

You can use only icons.

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.

Social buttons

The classic button, in different social classes.

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.

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.