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:
When using the
<a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use
It is recommended to use the
<button> element whenever possible, as this has the best consistency across browsers.
Use Bootstrap 5's
.btn-outline-* classes to apply the semantic color to the outline only.
You can specify the button size with Bootstrap's
.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.
Bootstrap provides specific styles for the
disabled state (as well as for other states, such as
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
<input> elements. To disable those buttons, use the standard HTML
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.