Buttons

Use the btn class to show the default button style.

Use the btn-outline- class with the below-mentioned variation to create a button with the outline.

Use the rounded-pill class to make a rounded button.

Use the btn-soft- class with the below-mentioned variation to create a button with the soft background.

Use the button classes on an <a>, <button>, or <input> element.

Use the bg-*-gradient class to create a gradient button.

Use the btn-animation class to create a animation effect.

Use the btn-label class to create a button with the label.

Use btn-lg class to create a large size button and btn-sm class to create a small size button.

Use the data-bs-toggle="button" to toggle a button’s active state.

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Use btn-icon class to wrap icon in button

Use the d-grid class to create a full-width block button.