Bootstrap 5 Buttons

Bootstrap 5 provides nine predefined styles for buttons — each serving a different semantic purpose.

To style a button, use Bootstrap's .btn class, followed by the desired style. For example, class="btn btn-primary" results in a primary button.

Here's the code used for all nine button styles:

Button Elements

Bootstrap 5's button styles are designed to be used with the <button> element, but they can also be applied to <input> and <a> elements.

When using the <a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use role="button".

It is recommended to use the <button> element whenever possible, as this has the best consistency across browsers.

Button Outlines

Use Bootstrap 5's .btn-outline-* classes to apply the semantic color to the outline only.

Button Size

You can specify the button size with Bootstrap's .btn-lg and .btn-sm classes. Place these in addition to the other button classes. Like this:

Block Level Buttons

Bootstrap 4 buttons included a .btn-block class to create a block level button, but this isn't included in Bootstrap 5.

A block level button spans the width of its parent. In Bootstrap 5, you can create a block level button by using the various display and gap utility classes.


Disabled Buttons

Bootstrap provides specific styles for the disabled state (as well as for other states, such as active).

If you need to disable a button that uses an <a> element, you can use Bootstrap's .disabled class. You don't need to do this on buttons that use the <button> and <input> elements. To disable those buttons, use the standard HTML disabled attribute.

Here's an example of disabling buttons from the various button types:

Toggle Checkboxes & Radio Buttons

Bootstrap 5 includes a button plugin that allows you to create on/off toggle buttons. See the Bootstrap 5 documentation for instructions on how to do this.