Bootstrap 5 Buttons

Bootstrap 5 Buttons Guide

Bootstrap 5 provides a wide range of buttons that are highly customizable using different styles, sizes, colors, and interactive elements.

---

1. Basic Buttons

Use the .btn class along with a color class (.btn-primary, .btn-secondary, etc.) to create a button.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

---

2. Outline Buttons

Use .btn-outline-* classes for buttons with only a border and no background.

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-dark">Dark</button>

---

3. Button Sizes

Use .btn-lg for large buttons and .btn-sm for small buttons.

<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>

---

4. Block-Level Buttons (Full Width)

Use .d-grid to make buttons stretch to full width.

<div class="d-grid gap-2">
    <button class="btn btn-success">Full Width Button</button>
</div>

---

5. Disabled Buttons

Use the disabled attribute or .disabled class to make a button unclickable.

<button class="btn btn-primary" disabled>Disabled Button</button>
<button class="btn btn-outline-secondary disabled">Disabled Outline</button>

---

6. Buttons as Links

You can use <a> elements as buttons.

<a href="#" class="btn btn-info">Link Button</a>

---

7. Button Group (Multiple Buttons Together)

Use .btn-group to group multiple buttons.

<div class="btn-group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-primary">Right</button>
</div>

---

8. Toggle Button (Active State)

Add .active to a button to show it as active.

<button class="btn btn-success active">Active Button</button>

---

9. Toggle Button (Using JavaScript)

Use data-bs-toggle="button" to make a button toggle on click.

<button class="btn btn-warning" data-bs-toggle="button">Toggle Me</button>

---

10. Button with Spinner (Loading State)

Use .spinner-border or .spinner-grow inside a button.

<button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
</button>

---

Conclusion

✔ Bootstrap 5 buttons are versatile and easy to use.
✔ You can customize them with colors, sizes, outlines, and different states.
✔ You can create button groups, toggle buttons, and loading indicators.

Need more examples? Let me know!

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.