Buttons
Basic Examples
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
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.
Rounded Buttons
Use class .btn-rounded for button round border.
Buttons with Icon
Add icon in button.
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).
Button Sizes
Fancy larger or smaller buttons? Add
.btn-lg or .btn-sm for additional sizes.
Button 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.
Link Functionality Caveat Disable Buttons
<a>s don’t support the disabled attribute, so you must add the .disabled class and aria-disabled="true" to make it visually appear disabled. also include a tabindex="-1" attribute.
Block Buttons
Create block level buttons—those that
span the full width of a parent—by adding .d-grid.
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 the
<button>.
Button Group Style
Wrap a series of buttons with Mixed Style and Outline button
Checkbox Buttons
Bootstrap’s .button styles can be applied to
other elements, such as <label>s, to provide checkbox style button
toggling. Add data-bs-toggle="buttons" to a
.btn-group containing those
modified buttons to enable toggling in their respective styles.
Radio Buttons
Bootstrap’s .button styles can be applied to
other elements, such as <label>s, to provide radio style button
toggling. Add data-bs-toggle="buttons" to a
.btn-group containing those
modified buttons to enable toggling in their respective styles.
Button Toolbar
Wrap a series of buttons with .btn in .btn-group.
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
Button Group Size
Instead of applying button sizing classes to every button in a group, just add
.btn-group-* to each .btn-group, including each one when nesting multiple
groups.
Vertical Variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
