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.
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 .btn-block.
Toggle States
Add data-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-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-toggle="buttons"to a .btn-groupcontaining those modified buttons to enable toggling in their respective styles.
Sizing
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.
