Buttons

Buttons color, size and types
Buttons - Normal
Refresh Manage Widgets Settings

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

Button - Rounded
Refresh Manage Widgets Settings

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

Button - disabled
Refresh Manage Widgets Settings

Use a classes .disabledto quickly create a Disabled btn.

Button - Soft
Refresh Manage Widgets Settings

Use a classes .btn-primary-soft to quickly create a bordered buttons.

Outline - Buttons
Refresh Manage Widgets Settings
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
Refresh Manage Widgets Settings

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
Refresh Manage Widgets Settings
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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link


Split button dropdown

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link


Animate icon buttons

Use the .fa-spin class to get any icon to rotate, and use .fa-pulse to have it rotate with 8 steps.

Button groups
Refresh Manage Widgets Settings
Basic example

Wrap a series of buttons with .btn in .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.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link