Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Example
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
.btn-{name} for various btn options. Button tags
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).
Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the btn-outline-* ones to remove all background images and colors on any button.
Soft buttons
In need of a button, but not the hefty background colors they bring? Add modifier classes with the .btn-soft ones to soften background colors on any button.
Soft Outline buttons
In need of a button, but not the hefty background colors they bring? Add modifier classes with the .btn-soft ones to soften background colors on any button.
Buttons with Icons
Try with flowing code examples to use icons in buttons
Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
Rounded Buttons
Need to soften the buttons edges? Add .rounded-pill for rounded buttons.
Disabled state
Make buttons look inactive by adding the disabled boolean attribute to button
Block buttons
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
Toggle states
Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.
