Colors

Add .btn to a <button> element. For colors, also add btn-*, where * indicates a contextual class.

Button Outline

Add .btn-outline-* to a <button> element, where * indicates a contextual class.

NOTE: Not all outlines show up well and are only meant for dark themes (e.g. Light), while others don't work at all (e.g. Basic and Link).

Small Buttons

Add .btn-sm to a <button> element.

Large Buttons

Add .btn-lg to a <button> element.

Block Level Buttons

Wrap your button inside a <div> element with .d-grid and use .gap to control the space between them.

NOTE: You can achieve the same result by simply changing the width of the button to 100% (.w-100).

Modified Block Level Buttons

To change the size of Block Level Buttons, add .col-* to either the container or the individual button.

To center Block Level Buttons, add .mx-auto in addition to .col-*.

Responsive Buttons

To make buttons stack responsively, add .d-*-flex to the grid container, where * indicates a breakpoint.

To align the buttons when horizontal, add justify-content-*-+ to the grid container, where the * indicates a breakpoint and the + indicates start, center, end, between or around.

Active/Disabled Buttons

Add .active to a button to make it appear pressed.

Add .disabled, or use the disabled attribute to a button to make it unclickable.

Spinner Buttons

Add a <span> before your button text with .spinner-border|grow and an optional .spinner-border|grow-sm to make it small.