Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Two Tone Buttons

applies .btn-tone to make two tone style

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.


Buttons Sizes

applies .btn-lg, .btn-sm and .btn-xs to resize the button

applies .btn-block to make button full width

Buttons Group

Wrap a series of buttons with .btn in .btn-group.

Icon Buttons

Use btn-icon to create a icon button.

Use btn-tone to create a 2 tone style.

applies .btn-rounded to make round style

applies .btn-tone & .btn-rounded to make round two tone style

Loading Buttons

use .is-loading class to add loading inidcator to button