Default Button

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

Disabled buttons

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

Color variations

Border buttons

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

Square buttons

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

Rounded buttons

Add .btn-pillclass to any button more rounded.

Button with icon

Basic buttons are traditional buttons with borders color opitons.

Button with icon-loader

Basic buttons are traditional buttons with borders color opitons.

Button size

Add .btn-lgor .btn-smor .btn-blockfor additional sizes.

Social buttons

Social buttons

You can use only icons.

Icon buttons

Icon only button. Add .btn-iconclass to remove unnecessary button.

Loading button

Add .btn-loadingto 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.

List of buttons

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

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

Use the .text-rightmodifiers to alter the alignment.