Button With Icons
Predefined button styles, each serving its own semantic purpose..
Buttons Sizes
Predefined button styles, each serving its own semantic purpose..
Block Buttons
Add .d-grid or .gap-2 for additional sizes.
Buttons with Icons
Icon only button. Add .btn-icon classes to quickly create a styled button..
Social buttons
Icon only button. Add .btn-icon classes to quickly create a styled button..
Buttons 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".
Buttons Lodding
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.
Buttons 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.
Buttons 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.
Buttons Group Sizes
Use any of the available .btn-group-* in .btn-group classes to quickly create a styled button.
Vertical Group Buttons
Use any of the available .btn-group-vertical classes to quickly create a styled button.
