Use any of the available button classes to quickly create a styled button. Semantically distinguishable beauty.

Secondary Primary Success Info Warning Danger Gray Inverse

Add .btn-rounded class to quickly create a styled rounded button. You will get the following examples.

Secondary Primary Success Info Warning Danger Gray Inverse

Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Secondary Primary Success Info Warning Danger Gray Inverse

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Large button Large button

Default button Default button

Small button Small button

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Block large button Block default button Block small button

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

Primary button Button Block disabled button Rounded disabled button

Wrap a series of buttons with .btn in .btn-group.

Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Bootstrap’s .button styles 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 toggling in their respective styles.

Note that pre-checked buttons require you to manually add the .active class to the input’s <label>.

Do more with buttons. Control button states or create groups of buttons for more components like toolbars. Add data-toggle="buttons" to a group of radio inputs for radio style toggling on btn-group.