Buttons

Examples

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Soft Buttons

Fancy custom soft buttons? Add .btn-soft-primary

Rounded Buttons

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 classes with the .btn-outline-*

Disabled Buttons

Make buttons look inactive by adding the disabled boolean attribute to any <button>element.

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.

Check And 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-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggleto style the <input>s within your buttons.

Button Group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Only Icon Buttons

A button variant for using only icons.Add <i class="fab fa-facebook"i></i>

Icon With Label Buttons

A button variant for using icon with label.Add <i class="fab fa-facebook"></i>