🍞 Bootstrap 5 – Toasts: Create Lightweight, Stackable Notifications

🧲 Introduction – What Are Toasts in Bootstrap 5?

Toasts in Bootstrap 5 are lightweight notification components that pop up temporarily to inform users about actions, updates, or system messages—without interrupting workflow. Think of them as sleek, dismissible alerts that appear at the corner of the screen.

🎯 In this guide, you’ll learn:

• How to create toasts with custom content and icons
• Automatically or manually show/hide toasts
• Position toasts using flex and utility classes
• Stack multiple toasts and manage dismiss behavior

---

✅ Example 1 – Basic Toast with Auto Hide

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000" data-bs-autohide="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>Just now</small>
      <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello! This is a toast message.
    </div>
  </div>
</div>

---

🔍 Code Explanation

Element / Attribute	Description
.toast	Main toast element
role="alert"	ARIA role for accessibility
data-bs-autohide="true"	Automatically hides toast after timeout
data-bs-delay="3000"	Duration before auto-dismiss (in milliseconds)
.toast-container	Wrapper for positioning (e.g., bottom-right)
.toast-header / .toast-body	Header and message body sections
btn-close	Dismiss button (built-in Bootstrap class)

---

✅ Example 2 – Trigger Toast Manually via Button

<button class="btn btn-primary" id="showToastBtn">Show Toast</button>

<script>
  const toastEl = document.querySelector('.toast');
  const toast = new bootstrap.Toast(toastEl);

  document.getElementById('showToastBtn').addEventListener('click', () => {
    toast.show();
  });
</script>

• JavaScript control lets you show/hide toast based on events like form submissions or actions.

---

✅ Example 3 – Toasts with Icons & Background Color

<div class="toast align-items-center text-white bg-success border-0" role="alert">
  <div class="d-flex">
    <div class="toast-body">
      ✅ Action completed successfully!
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  </div>
</div>

🔍 Styling Tips:

• Add .bg-* and .text-white for contextual coloring.
• Use icons/emojis to reinforce message tone (✅ ❗ ⚠️ 💬).

---

✅ Positioning Toasts

Use .position-fixed + .top-0 / .bottom-0 / .start-0 / .end-0 with padding for placement:

<div class="toast-container position-fixed top-0 end-0 p-3">
  <!-- your toast -->
</div>

You can stack multiple .toast elements inside one .toast-container.

---

✅ Multiple Toasts (Stacked)

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast">Toast 1</div>
  <div class="toast mt-2">Toast 2</div>
</div>

• Use margin (.mt-2) to visually separate stacked toasts.

---

🛠️ Best Practices for Toast Notifications

Best Practice	Why It Helps
Use for passive, non-blocking feedback	Avoid interrupting user flow
Keep messages short and clear	Makes content scannable
Avoid overusing toasts	Too many can feel noisy or spammy
Use color to match context	Helps users quickly interpret importance
Dismiss automatically or with a button	Give users control or timeout options

---

📌 Summary – Elegant Notifications with Bootstrap Toasts

Bootstrap 5 toasts are perfect for dynamic feedback, system alerts, and real-time updates. With flexible placement, manual or auto triggering, and stacked support, they’re a go-to UI pattern for modern interfaces.

🔍 Key Takeaways:

• Use .toast inside .toast-container for structure and placement
• Combine data-bs-delay + data-bs-autohide for timing control
• Trigger toasts using JavaScript (new bootstrap.Toast(...))
• Style with .bg-*, .text-white, and optional icons

⚙️ Ideal for dashboards, messaging apps, confirmation feedback, and live alerts.

---

❓ FAQs – Bootstrap 5 Toasts

❓ Do Bootstrap toasts auto-show when added to the page?
❌ No. You must explicitly show them via JS or by toggling visibility.

---

❓ How do I stop a toast from auto-hiding?
✅ Set data-bs-autohide="false" or configure via JavaScript.

---

❓ Can I use multiple toasts on the same page?
✅ Yes. Place them inside a shared .toast-container and manage via JavaScript.

---

❓ Where are toasts typically positioned?
✅ Commonly at bottom-right (bottom-0 end-0), but fully customizable using positioning classes.

---

Share Now :