Buttons
Button with icon
Basic buttons are traditional buttons with borders color opitons.
Button size
Add .btn-lg
or .btn-sm
for additional sizes.
Block Button
Add .d-grid
or .gap-2
for additional sizes.
Icon buttons
Icon only button. Add .btn-icon
classes to quickly create a styled button..
Social buttons
You can use only icons.
Button Tags
Add .btn
, <input>
, <a>
classes to quickly
create
a styled button..
Toggle buttons
Add data-bs-toggle="button"
to
toggle a button .active
class &
required aria-pressed="true"
.
Social buttons
The classic button, in different social classes.
Loading button
Add .btn-loading
to use a loading
state on a button. The width of the button depends on the length of the
text inside Since the loading spinner is implemented using the element.
Button dropdown
Wrap the dropdown’s toggle using different colors and icons implemented
in different dropdowns styles (your button or link) and the dropdown
menu within .dropdown
, or another
element that declares position: relative;
. Dropdowns
can
be triggered from <a>
or
<button>
elements to better
fit your potential needs.
Basic Button Group
Use any of the available .btn
in
.btn-group
classes to quickly
create a styled button.
Button Toolbar
Combine sets of button groups into button toolbars for more complex components.
Outline Button Group
Use any of the available .btn .btn-outline-
in .btn-group
classes to quickly
create a styled button.
Min-Width Buttons
Add .btn
, .w-xs
, .w-sm
, .w-md
, .w-lg
,
classes to quickly create a styled button..
Checkbox Button Group
Use any of the available .btn
in
.btn-group
classes to quickly
create a styled button.
Radio Button Group
Use any of the available .btn
in
.btn-group
classes to quickly
create a styled button.
Button Group Sizes
Use any of the available .btn-group-*
in .btn-group
classes to quickly
create a styled button.
Vertical Button Group
Use any of the available .btn-group-vertical
classes to
quickly create a styled button.