Buttons
Default Buttons
Use the button classes on an <a>, <button>, or <input> element.
Default Rounded Button
Add .rounded-pill to default button to get rounded corners.
Outline Buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-*-outline ones to remove all background images and colors on any button.
Outline Rounded Button
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-*-outline .rounded-pill ones to remove all background images and colors on any button.
Button-Width
Create buttons with minimum width by adding add .width-xs, .width-sm, .width-md, .width-lg & .width-xl.
Button-Sizes
Add .btn-lg, .btn-sm for additional sizes.
Button Labels
Use the button classes on an <a>, <button>,
or <input> element. And put <span>
with class .btn-label and any icon inside it. If you want to put
icon on right side then add class .btn-label-right in <span>
Button Labels Rounded
Use the button classes on an <a>, <button>,
or <input> element. And put <span>
with class .btn-label and any icon inside it. If you want to put
icon on right side then add class .btn-label-right in <span>
Icon Button
Icon only button.
Block Button
Create block level buttons by adding class .d-grid to parent div.
Button group
Wrap a series of buttons with .btn in .btn-group.
Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Social Buttons with label
Use class .btn-@yoursocial to the parent.
Social buttons
Use class .btn-@yoursocial to the parent.