Filled
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Border
Use a class .btn-outline-{color}
to quickly create a outline button.
Flat
Use .btn-flat-{color}
to create a flat button
Gradient
use btn-gradient-{color}
create gradient buttons
Relief
Use .btn-relief-{color}
to create a relief button.
Round buttons
Use a class .round
with outline button class to create round outline button.
Icon
Icon Only
You can use .btn-icon
. you can create a rounded button by using
.rounded-circle
with .btn-icon
. You can only use .btn-icon
when you
only want icon in your button
Basic Button group
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with
.btn
in .btn-group
.
Checkbox & radio group
Sizes
Add .btn-lg
or .btn-sm
for Fancy larger or smaller buttons size.
Add .btn-lg
or .btn-sm
with .btn-outline-*
for outline btn in
different sizes
Block level buttons
Create block level buttons with a mix of our display and gap utilities.
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.