Buttons

Default

Use the button classes on an <a>, <button>, or <input> element.

Outline

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

Pill

Add .btn-pill.

Labeled

Add <span> with class .btn-label.

Disabled

Add the disabled attribute to <button> buttons. Add the .disabled class to <a> buttons.

Sizes

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

Border width

Use .b-a-width-* to change button's border width.

Block

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

Button groups

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

Button dropdowns

Checkbox / Radio

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

With icons

Buttons with icons

Social

Use class .btn-@yoursocial.

Other

File upload button

Expand

Zoom

Slide

Built-in progress bar