Bootstrap includes six predefined button styles, each serving its own semantic purpose.
In need of a button, but not the hefty
background colors they bring? Replace the default modifier classes with
.btn-outline-* ones to remove
all background images and colors on any button.
.btn-rounded class in
<button> tag for a rounded button.
Outline Rounded button
classes are designed to be used with the
However, you can also use these classes on
<input> elements (though
some browsers may apply a slightly different rendering).
Fancy larger or smaller buttons? Add
.btn-sm for additional sizes.
Create block level buttons—those that
span the full width of a parent—by adding
to toggle a button’s
state. If you’re pre-toggling a button, you must manually add the
aria-pressed="true" to the
Group a series of buttons together on a single line with the button group
.button styles can be
other elements, such as
<label>s, to provide checkbox or radio style button
data-toggle="buttons" to a
.btn-group containing those
modified buttons to enable toggling in their respective styles.