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 .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).

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 active state. 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.