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.