Examples

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Rounded Buttons

Add .btn-rounded class in <button> tag for a rounded button.

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Block Buttons

Create block level buttons—those that span the full width of a parent—by adding .w-100 (or .d-grid on the parent).

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.

Button addons

Button Group

Group a series of buttons together on a single line with the button group