YouTip

Bootstrap 5 provides buttons with different styles.

Example

Basic Primary Secondary Success Info Warning Danger Dark Light Link

Try it yourself »

Button classes can be used on <a>, <button>, or <input> elements:

Example

Link Button Button

Try it yourself »

---

Button Outline

Bootstrap 5 also provides buttons with an outline, with a hover effect:

Example

Primary Secondary Success Info Warning Danger Dark Light

Try it yourself »

---

Button Sizes

Bootstrap 5 allows you to change the size of a button, with .btn-lg for large buttons and .btn-sm for small buttons:

Example

Large Button Default Button Small Button

Try it yourself »

---

Block Level Buttons

Block level buttons can be created by adding the .btn-block class. The .d-grid class is applied to the parent element:

Example

Try it yourself »

If you have multiple block level buttons, you can use the .gap-* class to set the spacing:

Example

Try it yourself »

---

Active and Disabled Buttons

Buttons can be set to an active or disabled state.

The .active class makes a button appear clickable, while the disabled attribute makes a button unclickable. Note that the <a> element does not support the disabled attribute, but you can add the .disabled class to disable the link.

Example

Active Button Disabled Button Disabled Link

Try it yourself »

---

Loading Buttons

We can also create a loading button.

Example

Loading.. Loading.. Loading..

Try it yourself »