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.
Example:
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.