Buttons
Basic Examples
Bootstrap includes several predefined button styles, 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).
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.
Outline button
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.
Button Sizes and Disabled state
Fancy larger or smaller buttons? Add .btn-lg
or .btn-sm
for additional sizes.
Create block level buttons—those that span the full width of a parent—by adding .btn-block
.
Make buttons look inactive by adding the disabled
boolean attribute to any <button>
element.
Button group
Wrap a series of buttons with .btn
in .btn-group
. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
Button Nesting
Wrap a series of buttons with .btn
in .btn-group
. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.