Use bootstrap .btn
class for links, buttons and inputs.
Outlined colors
Use .btn-outline
class together with the .btn
.
Rounded
Add .btn-rounded
class for adding the rounded borders.
Block
.d-grid
class on parent of button will make your button full-width unit. and .gap-2
class will create space space between buttons.
States
:active
or .active
or :focus
or .focus
(:hover
or .hover
)
:disabled
or .disabled
Wrap a series of buttons with in .Combine .btn
in .btn-group
Combine sets of .btn-group
into a .btn-toolbar
for more complex components.
Use .btn-group-rounded
class for adding the rounded borders.
Separate buttons with separate class .btn-group-separators
to .btn-group
Instead of applying button sizing classes to every button in a group, just add .btn-group-*
to each .btn-group
, including when nesting multiple groups.
.btn-group-lg
.btn-group-sm
Make a set of buttons appear vertically stacked rather than horizontally (.btn-group-vertical
).
Sizes (.btn-*
classes)
Place a .btn-group
within another .btn-group
when you want dropdown menus mixed with a series of buttons.
Vertical variation
Split button dropdowns
Separated split button dropdowns