Button · Bootstrap v6.0

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Buttons have a standard .btn class that sets up basic styles such as padding and content alignment, along with fallback visual styles for basic accessibility. Change this class to another button class to apply different visual styles for a specific button variant and theme.
The .btn class is intended to be a starting point for your own custom button styles, while our provided button variants can be used alongside .theme-* classes or as a basis for your own custom styles.
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. Combined with our utilities, you have a very powerful set of defaults to choose from.
Compare all button variants and styles at once:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
Use the .btn-link class to create a button that looks like a link.
Link buttons can also be styled with the theme colors.
Add visual depth to solid buttons with gradients and shadows using the .btn-styled modifier class. This provides a more three-dimensional appearance that can be customized further with CSS variables.
The gradient and shadow can be customized via CSS variables:
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).
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
You can even roll your own custom sizing with CSS variables:
Use .btn-icon for square buttons that contain only an icon. This class sets aspect-ratio: 1 and removes padding, making the button perfectly square based on its min-height. Always include an aria-label attribute on icon-only buttons to ensure they are accessible to screen reader users.
Combine with size classes for different icon button sizes:
Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none, preventing hover and active states from triggering, and some additional styling to indicate the disabled state.
Disabled buttons using the <a> element behave a bit different. Use the .disabled class instead of the attribute on <a> elements to make them visually appear disabled. If you need to keep the href attribute, you may need additional HTML to fully disable the link functionality.
If there’s an href attribute, add tabindex="-1" and aria-disabled="true" to prevent keyboard focus and assistive technologies from interacting with the link.
You may also want to use custom JavaScript to disable the link functionality altogether.
Use the .d-grid utility to create responsive stacks of full-width “block buttons”. Space them out with gap utilities.
Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .md:d-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6. Center it horizontally with .mx-auto, too.
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they’re no longer stacked.
Create button-like checkboxes and radio buttons by adding .btn-check to a <label> element with button classes, with a checkbox or radio input nested inside. The input is visually hidden while the label provides the button appearance. These toggle buttons can further be grouped in a button group if needed.
Visually, these toggle buttons are identical to our JavaScript toggle buttons, but are conveyed differently by assistive technologies. Checkbox toggles will be announced by screen readers as "checked"/"not checked"as they are checkboxes under the hood. The JavaScript toggle buttons are announced as "button"/"button pressed". It’s up to you to decide which approach makes more sense for your use case.
Checkboxes can be checked, unchecked, or disabled. Checkbox-based toggle buttons only toggle a single button’s state.
Radios can be checked, unchecked, or disabled. Use radio-based toggle buttons to toggle states between a set of buttons that include input elements with the same name attribute value.
The button plugin allows you to create simple on/off toggle buttons.
Visually, these toggle buttons are identical to our input toggle buttons, but are conveyed differently by assistive technologies. Checkbox toggles will be announced by screen readers as "checked"/"not checked"as they are checkboxes under the hood. The JavaScript toggle buttons are announced as "button"/"button pressed". It’s up to you to decide which approach makes more sense for your use case.
Add data-bs-toggle="button" to toggle a button’s active state. Also add aria-pressed so assistive technologies announce the control as a toggle button. Use aria-pressed="false" for the default state. If you’re pre-toggling a button, add the .active class and aria-pressed="true".
aria-pressed has no default value. A button without it is annou