Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Fancy larger or smaller buttons? Add
.btn-sm for additional sizes.
<!-- Sizing Button --> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-primary btn-xs">Xtra Small button</button>
Here we create a responsive variation, starting with vertically stacked buttons until the
md breakpoint, where
.d-md-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
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.
Buttons will appear pressed (with a darker background, darker border, and
inset shadow) when active. There’s no need to add a class to
<button>s as they use a
pseudo-class. However, you can still force the same active
.active (and include
aria-pressed="true" attribute) should you need to replicate the
Make buttons look inactive by adding the
attribute to any
data-bs-toggle="button" to toggle a
active state. If you’re
pre-toggling a button, you must manually add the
aria-pressed="true" to the