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
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
class, thus nullifying the
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
. 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
s as they use a pseudo-class
. However, you can still force the same active appearance with
(and include the
attribute) should you need to replicate the state programmatically.
Make buttons look inactive by adding the
boolean attribute to any
to toggle a button’s
state. If you’re pre-toggling a button, you must manually add the