Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
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
.btn classes are designed to be used
<button> element. However, you can also use these
Fancy larger or smaller buttons? Add
.btn-sm for additional sizes.
Checkbox and Radio Buttons
.button styles can be applied to other elements, such as
<label>s, to provide checkbox or radio style button toggling.
data-toggle="buttons" to a
.btn-group-toggle to style the
Block Level Buttons
Create block level buttons—those that span the full
width of a parent—by adding
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
.btn-rounded to default button to
get rounded corners.
Button Group Sizing
Instead of applying button sizing classes to every
button in a group, just add
.btn-group-* to each
.btn-group, including each one when nesting multiple groups.
Nesting Button Group
.btn-group within another
.btn-group when you want dropdown menus mixed with a series of
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.