Buttons
Basic Buttons
Use btn
class to create a basic button. You can use btn-{color}
class to
change the button color.
Button Sizes
Use btn-{size}
class to change the button size. You can use btn-xs
,
btn-sm
, btn-md
, btn-lg
and btn-xl
classes to
change the button size. Default button size is btn-md
.
Outline Buttons
Use btn
with the
btn-outline-{color}
to create an outlined button.
Soft Buttons
Use btn
with the btn-soft-{color}
class to create a soft button.
Plain Buttons
Use btn
with the btn-plain-{color}
class to create a plain button.
Rounded Buttons
Use
rounded-full
class to create a rounded button.
Icon Buttons
Example of icon buttons.
Loading Buttons
Example of loading buttons.
Disabled Buttons
To disable a button, use
disable="true"
attribute on it.
Block Buttons
Use
w-full
class to create a block button.
Group Buttons
To create button groups, wrap all the buttons with a
btn-group
class.