Basic Buttons
Use the button classes .btn-* on an a,
button, or
input element.
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm for additional sizes.
Block button
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.
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm for additional sizes.
Block button
Icon Buttons
You can easily create a button with icon on the left .icon-left or
right
.icon-right side
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm for additional sizes.
Icon only
Square Buttons
Do you like the square buttons? Add .rounded-0
to change its shape.
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm for additional sizes.
Button Group
Wrap a series of buttons with .btn in
.btn-group.
Default style
Mixed style
Outline style
Using with checkbox
Using with radio
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
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.
Place a .btn-group within another
.btn-group when you want dropdown menus mixed with a series of
buttons.
Vertical variation