Buttons
Variants
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
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.
Sizes
Fancy larger or smaller buttons? Add
.btn-lg
or
.btn-sm
for additional sizes.
Disabled state
Make buttons look inactive by adding the
disabled
boolean attribute to any
<button>
element. Disabled buttons have
pointer-events: none
applied to, preventing hover and active states from triggering.
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.