Examples
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
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.
Rounded Buttons
Use a classes btn btn-rounded btn-success
to quickly create a General btn.
Outline Rounded buttons
Use a classes btn btn-rounded btn-outline
to quickly create a General btn.
Button Sizes
Fancy larger or smaller buttons? Add .btn-lg
, .btn-sm
or .btn-nor
for additional sizes.
Buttons with Dropdown
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Dropdowns can be triggered from <a>
or <button>
elements to better fit your potential needs.
Buttons with Split
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split
for proper spacing around the dropdown caret.
Buttons with Icons
Use a classes btn btn-success
& i class ="fa fa-heart"
to quickly create a General btn.