UI Buttons

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-norfor 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.

Social Buttons

Use a classes btn btn-facebook to quickly create a General btn.

Social Rounded Buttons

Use a classes btn btn-facebook to quickly create a General btn.