Buttons

Buttons color, size and types

Buttons - Normal

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

Button - Rounded

Add .rounded-pillto default button to get rounded corners.

Button - disabled

Use a classes .disabledto quickly create a Disabled btn.

Button - Soft

Use a classes .btn-primary-softto quickly create a bordered buttons.

Outline - Buttons

Outline-Buttons

Use a classes btn btn-outline-lightto quickly create a Outline btn.

Rounded-Outline-Buttons

Use a classes btn btn-outline-light rounded-pillto quickly create a Rounded btn.

Labeled-Buttons

Social - Buttons

Use a classes btn btn-block btn-social btn-adnto quickly create a Rounded btn.

Use a classes btn btn-social-icon btn-adnto quickly create a Rounded btn.

Circle icon, Button dropdown, Button dropdown

Circle icon

Use a classes btn btn-light btn-circleto quickly create a Rounded btn.

Button dropdown

Turn a button into a dropdown toggle with some basic markup changes.

Split button dropdown

Turn a button into a dropdown toggle with some basic markup changes.

Animate icon buttons

Use the .fa-spinclass to get any icon to rotate, and use .fa-pulseto have it rotate with 8 steps.

Button groups

Basic example

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

Button toolbar

Combine sets of <div class="btn-group">into a <div class="btn-toolbar">for more complex components.

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-*to each .btn-group, including when nesting multiple groups.

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.