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.