Buttons
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-roundedfor button round border.
Buttons with icon
Add icon in button.
Button tags
The .btnclasses 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).
Sizes
Fancy larger or smaller buttons? Add .btn-lgor .btn-smfor additional sizes.
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 activestate. If you’re pre-toggling a button,you must manually add the .activeclass andaria-pressed="true"to the <button>.
Checkbox buttons
Bootstrap’s .buttonstyles can be applied to other elements,such as <label>s,to provide checkbox or radio style button toggling. Add data-bs-toggle="buttons"to a .btn-groupcontaining those modified buttons to enable toggling in their respective styles.
Radio buttons
Bootstrap’s .buttonstyles can be applied to other elements,such as <label>s,to provide checkbox or radio style button toggling. Add data-bs-toggle="buttons"to a .btn-groupcontaining those modified buttons to enable toggling in their respective styles.
