Button with icon
Button with Svg icon
Button with icon-loader
Social buttons
Icon buttons
Svg Icon Buttons
Button size
Social buttons
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".
Group buttons
Group buttons with Dropdown
Group buttons with Dropdown
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 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.
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.
List of buttons
You can now create a list of buttons with the .btn-list container.
Use the .text-center modifiers to alter the alignment.
Use the .text-end modifiers to alter the alignment.