Bootstrap Toasts & Alerts — Notification Components

In this tutorial, you will learn about Bootstrap Toasts & Alerts. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap alerts display feedback messages with contextual colors and dismiss buttons. Toasts are lightweight notification components that auto-hide and stack in a container.

What You'll Learn

You will learn how to create dismissible alerts with contextual colors, build toast notifications, configure toast auto-hide and stacking, and use alert linking.

Why It Matters

Notifications keep users informed. DodaTech's applications use alerts for form feedback and toasts for non-intrusive system notifications.

Real-World Use

Durga Antivirus Pro uses toasts for scan completion notifications and alerts for critical security warnings that require user acknowledgment.

flowchart LR
    A[Tooltips & Popovers] --> B[Toasts & Alerts]
    B --> C[Alerts]
    B --> D[Dismissible Alerts]
    B --> E[Toasts]
    B --> F[Toast Containers]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Basic Alerts

<div class="alert alert-primary" role="alert">This is a primary alert.</div>
<div class="alert alert-secondary" role="alert">This is a secondary alert.</div>
<div class="alert alert-success" role="alert">Operation completed successfully.</div>
<div class="alert alert-danger" role="alert">An error occurred. Please try again.</div>
<div class="alert alert-warning" role="alert">Warning: Your session will expire soon.</div>
<div class="alert alert-info" role="alert">New update available.</div>
<div class="alert alert-light" role="alert">Light alert for subtle messages.</div>
<div class="alert alert-dark" role="alert">Dark alert for emphasis.</div>

Expected output: Eight alerts in different contextual colors with consistent styling.

Dismissible Alerts

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> You should check this out.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Success!</strong> Your changes have been saved.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Expected output: Alerts with a close button (x) in the top-right corner that dismisses the alert when clicked.

Alert with Additional Content

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Your system scan completed successfully. No threats were detected.</p>
  <hr>
  <p class="mb-0">Next scheduled scan: Tomorrow at 3:00 AM.</p>
</div>

Expected output: An alert with a heading, body text, a horizontal divider, and a smaller footer line.

Alert Links

<div class="alert alert-primary" role="alert">
  A simple primary alert with an <a href="#" class="alert-link">example link</a>.
  The link color matches the alert context.
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">View details</a> of the security incident.
</div>

Expected output: Alerts containing links styled with the alert's contextual color.

Basic Toast

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">DodaTech</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Scan complete. No threats found.
  </div>
</div>

<button type="button" class="btn btn-primary" id="showToast">Show Toast</button>
<script>
  document.getElementById('showToast').addEventListener('click', function () {
    var toastEl = document.querySelector('.toast');
    var toast = new bootstrap.Toast(toastEl);
    toast.show();
  });
</script>

Expected output: Clicking the button shows a toast notification with a header (icon, title, time, close button) and body text.

Toast Stacking

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Notification</strong>
      <small>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">New version of Doda Browser is available.</div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Security Alert</strong>
      <small>2 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Login from new device detected.</div>
  </div>
</div>

Expected output: Toasts stacked vertically in the bottom-right corner of the viewport using the toast-container positioning.

Toast Options

<div class="toast" data-bs-autohide="false" data-bs-delay="5000">
  <div class="toast-header">
    <strong class="me-auto">Persistent Toast</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    This toast does not auto-hide (data-bs-autohide="false").
  </div>
</div>

Expected output: A toast that stays visible until the user manually closes it.

Common Mistakes

1. Missing role="alert" on Alerts and Toasts

The role="alert" attribute is essential for screen readers. Without it, assistive technologies do not announce the notification.

2. Alerts Without alert-dismissible for Close Buttons

A close button in an alert requires the alert-dismissible class on the alert container for proper positioning.

3. Forgetting data-bs-dismiss="alert" on Close Button

The close button needs data-bs-dismiss="alert" to trigger dismissal. Without it, the button does nothing.

4. Toasts Not Visible Without Initialization

Toasts are hidden by default. They must be shown via JavaScript (new bootstrap.Toast(el).show()) or data attributes.

5. Not Using toast-container for Positioning

Toasts outside a toast-container may not position correctly. Always wrap toasts in a container class with position utilities.

Practice Questions

1. What class makes an alert dismissible? alert-dismissible on the alert element, plus a button with data-bs-dismiss="alert".

2. How do you style a link to match the alert color? Add alert-link class to the anchor tag inside the alert.

3. What makes a toast not auto-hide? data-bs-autohide="false" on the toast element prevents auto-dismissal.

4. What is a toast-container used for? It provides positioning context for stacking toasts, typically in a corner of the viewport.

5. How do you show a toast programmatically? Create a Toast instance: new bootstrap.Toast(toastElement).show().

Challenge

Build a notification system with three different toasts that appear when buttons are clicked: a success toast for save confirmation, a warning toast for session timeout warning, and an info toast for updates. Stack them in the top-right corner.

FAQ

Mini Project

Build a form submission feedback system. On form submit, show a success toast that auto-hides after 3 seconds. If validation fails, show a dismissible danger alert with the error details at the top of the form.

What's Next

Learn Badges and Progress for status indicators. Then explore Customizing Bootstrap with Sass for theme customization.