Default colors
options

Sizes

Use .btn-lg, .btn-sm for fast change button sizes.

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

Button Colors

Button States

Additional

Button Content

BUTTON GROUPS

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

BUTTON GROUPS SIZING

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

BUTTON GROUPS VERTICAL VARIATION

Make a set of buttons appear vertically stacked rather than horizontally (.btn-group-vertical).

Sizes (.btn-* classes)

NESTING

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Vertical variation