Estimated reading: 5 minutes 47 views

🧱 Bootstrap 5 Modals & Badges Demo – Interactive Popups & Notification Labels

🧲 Introduction – Using Modals & Badges in Bootstrap 5

Modals and badges are powerful UI tools in Bootstrap 5. Modals allow you to create popup dialogs, confirmations, or embedded forms, while badges offer small, attention-grabbing notification labels used alongside headings, buttons, and navs.

🎯 In this guide, you’ll learn:

How to trigger and display modals using Bootstrap JavaScript
Embed text, buttons, and forms inside modal windows
Add .badge and .rounded-pill styles to show status or counts
Combine badges with components like navs, buttons, and lists

✅ Example 1 – Triggering a Basic Modal

<!-- Button to Open Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demoModal">
  Launch Modal
</button>

<!-- Modal Structure -->
<div class="modal fade" id="demoModal" tabindex="-1" aria-labelledby="demoModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="demoModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is a Bootstrap 5 modal. You can place content, forms, or messages here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Element / Class	Description
`data-bs-toggle="modal"`	Enables modal trigger behavior
`.modal`, `.modal-dialog`	Core modal container and dialog layout
`.modal-header`, `.modal-body`, `.modal-footer`	Modal content sections

📌 Use modals for login forms, confirmations, messages, or embedded widgets.

✅ Example 2 – Modal with Form Inside

<div class="modal fade" id="formModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <h5 class="modal-title">Subscribe</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Subscribe</button>
        </div>
      </form>
    </div>
  </div>
</div>

Element	Description
`<form>` inside modal	Allows user input or submission
`.form-label`, `.form-control`	Styles form elements in modal

📌 Embed forms for subscriptions, settings, or contact inputs within modals.

✅ Example 3 – Notification Badges

<h4>Messages <span class="badge bg-primary">4</span></h4>
<button type="button" class="btn btn-dark">
  Inbox <span class="badge bg-light text-dark">2</span>
</button>

Class	Description
`.badge`	Creates inline label or counter
`.bg-`, `.text-`	Controls badge color and text visibility

📌 Attach badges to text, buttons, or icons to show counts or statuses.

✅ Example 4 – Pill-Shaped Badges & Lists

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-danger rounded-pill">5</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tasks
    <span class="badge bg-success rounded-pill">3</span>
  </li>
</ul>

Class	Description
`.rounded-pill`	Turns badge into a pill shape
`.d-flex .justify-content-between`	Aligns list text and badge side-by-side

📌 Combine badges with lists to show task counts, alerts, or actions.

📘 Modals & Badges Utility Reference

Feature	Class / Component	Description
Modal Trigger	`data-bs-toggle="modal"`	Connects button to modal popup
Modal Content	`.modal`, `.modal-dialog`, `.modal-body`	Container for structured modal layout
Badge Types	`.badge`, `.rounded-pill`	Create regular or pill-shaped labels
Badge Colors	`.bg-`, `.text-`	Add status colors (e.g., `.bg-danger`)
Positioning	`.d-flex`, `.justify-content-between`	Helps align badges inside containers

🛠️ Best Practices for Modals & Badges

Tip	Why It’s Important
Use IDs to uniquely target modals	Prevents conflicts when multiple modals exist
Avoid excessive modals on mobile	Keep interactions focused on small screens
Use `.rounded-pill` for cleaner UI	Pill-shaped badges look modern and readable
Pair badges with dynamic counts	Ideal for dashboards, alerts, or messaging
Add ARIA labels for accessibility	Improves usability for screen readers

📌 Summary – Recap & Next Steps

Bootstrap 5 modals and badges offer interactive and informative UI enhancements. Use them for user actions, notifications, and overlays without needing additional libraries.

🔍 Key Takeaways:

Use modals for popups, forms, and confirmations
Use badges to display counts, labels, and statuses
Customize both using .bg-*, .text-*, and flexbox utilities
Combine with lists, navs, and buttons for dynamic UI

⚙️ Ideal for eCommerce carts, dashboards, inboxes, and form dialogs.

❓ FAQs – Bootstrap 5 Modals & Badges

❓ Can I open multiple modals at once?
✅ Technically yes, but it’s not recommended. Overlapping modals can confuse users.

❓ How do I close a modal with JavaScript?
✅ Use bootstrap.Modal.getInstance(document.getElementById('demoModal')).hide();

❓ Are badges screen-reader friendly?
✅ Yes, but use aria-label or visually hidden text for clarity when displaying counts only.

❓ Can I position badges over icons or images?
✅ Yes. Use position-relative on the parent and position-absolute top-0 start-100 translate-middle on the badge.

« Previous Next »

Share Now :