Buttons
Default Buttons
Use the btn
class to show the default button style.
Outline Buttons
Use btn-outline-
class with the below-mentioned variation to create a button with the outline.
Rounded Buttons
Use the rounded-pill
class to make a rounded button.
Soft Buttons
Use btn-soft-
class with the below-mentioned variation to create a button with the soft background.
Ghost Buttons
Use btn-ghost-
class with the below-mentioned variation to create a button with the transparent background.
Gradient Buttons
Use bg-gradient
class to create a gradient button.
Animation Buttons
Use bg-animation
class to create an animated button.
Buttons with Label
Use btn-label
class to create a button with the label.
Load More Buttons
Example of loading buttons.
Border Buttons
Example of simple bottom borderd buttons.
Darken Buttons
Example of simple darken buttons.
Custom Toggle Buttons
Example of toggle buttons.
Buttons Sizes
Use btn-lg
class to create a large size button and btn-sm
class to create a small size button.
Buttons Width
Use w-xs,w-sm,w-md,w-lg
class to make different sized buttons respectively.
Buttons Tag
Use btn
class with different HTML elements. (though some browsers may apply a slightly different rendering)
Buttons Toggle Status
Use data-bs-toggle="button"
to toggle a button’s active state.
Buttons Grid
Use d-grid
class to create a full-width block button.
Checkbox & Radio Buttons
Combine button-like checkbox and radio
toggle buttons into a seamless looking button group.
Buttons Group
Use the btn-group
class in the parent class to wrap a series of buttons.
Icon Buttons
Use btn-icon
class to wrap icon in button
Buttons Toolbar
Use btn-toolbar
class to combine sets of button groups into more complex components.
Button Group Sizing
Use btn-group-
class with the below-mentioned variation to set the different sizes of button groups.
Vertical Variation
Make a set of buttons appear vertically
stacked .Split button dropdowns are not supported here.