Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

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.

Combine btn-ghost-** with .rounded-pill to create ghost-style buttons with rounded corners that highlight on hover.

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".

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

Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.

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

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.