Buttons
Buttons color, size and typesButtons - Normal
Use the button classes on an <a>, <button>, or <input> element.
Button-Rounded
Add .btn-rounded to default button to get rounded corners.
Button-Rounded
Use a classes .disabledto quickly create a Disabled btn.
Button-Transparent
Use a classes .btn-transparent to quickly create a bordered buttons.
Outline-Buttons
Outline-Buttons
Use a classes btn btn-default btn-outlineto quickly create a Outline btn.
Rounded-Outline-Buttons
Use a classes btn btn-default btn-outline btn-roundedto 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-default 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-spin class to get any icon to rotate, and use .fa-pulse to have it rotate
with 8 steps.
Button groups
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.