Buttons
Default Buttons
Use the button classes on an <a>
, <button>
, or <input>
element.
Rounded Buttons
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 Buttons
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 Buttons
Add .rounded-pill
to default button to get rounded corners.
Bordered Buttons
Use a classes .btn-bordered
with .btn-*
to quickly create a bordered buttons.
Bordered Rounded Buttons
Use a classes .btn-bordered-*
with .btn-*
to quickly create a bordered buttons.
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>
Rounded Buttons Lables
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>
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
.