Buttons
Buttons
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