Use any of the available <a>, <button>, or <input> classes .btn to quickly create a styled button.

Use .rounded-pill with a default button to give it pill-shaped rounded corners.

Use the .btn-outline-** classes to quickly create buttons with borders.

Use .rounded-pill with an outline button to give it pill-shaped rounded corners.

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

Use the btn-soft-** class along with .rounded-pill to create a softly styled button with rounded corners.

Use the btn-ghost-** class to create buttons with a transparent background that highlight with color on hover.

Use btn-ghost-** with .rounded-pill for rounded ghost buttons that highlight on hover.

Use the .bg-gradient class to apply a gradient style to buttons.

Use the .bg-gradient and .rounded-pill classes to apply a gradient style with rounded edges to buttons.

Want larger or smaller buttons? Use .btn-lg or .btn-sm to adjust the button size.

Use the disabled attribute on a <button> to make it inactive and non-interactive.

To create block-level buttons, add the .d-grid class to the parent <div>.

Add data-bs-toggle="button" to toggle a button’s active state. For pre-toggled buttons, also add .active and aria-pressed="true".

Icon only button. Use it when you want a button with just an icon and no text, ideal for compact UI elements or toolbars.

Use .btn classes with <button>, <a>, or <input> elements, though rendering may vary slightly across browsers.

Group multiple buttons together by wrapping them with the .btn class inside a .btn-group container. This helps align buttons side by side with consistent spacing and styling.