Default Buttons
Use the button classes on an
<a>,
<button>, or
<input>
element.
Rounded Button
Add
.rounded-pill
to default button to get rounded corners.
Outline Buttons
Use a classes
.btn-outline-**
to quickly create a bordered buttons.
Outline Rounded Button
Add
.rounded-pill
to default button to get rounded corners.
Soft Buttons
Use a classes
.btn-soft-**
to quickly create buttons with soft background.
Soft Rounded Button
Add
.rounded-pill
to default button to get rounded corners.
Buttons Labels
Put
<span>
with class
.btn-label
and any
icon
inside it. If you want to
put icon on right side then add class
.btn-label-right
in
<span>
Outline Rounded Button
Add
.rounded-pill
to default button to get rounded corners.
Button Width
Create buttons with minimum width by adding add
.width-xs,
.width-sm,
.width-md,
.width-lg
or
.width-xl.
Button Sizes
Add
.btn-lg,
.btn-sm, or
.btn-xs
for additional sizes.
Button Disabled
Add the
disabled
attribute to
<button>
buttons.
Icons Buttons
Icon only button.
Block Buttons
Create block level buttons by adding class
.d-grid
to parent div.
Button Group
Wrap a series of buttons with
.btn
in
.btn-group.