0
0
Bootsrapmarkup~5 mins

Toast notifications in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Toast notifications show small messages on the screen to inform users without interrupting their work.

To show a success message after a user saves a form.
To warn users about a temporary issue, like a lost internet connection.
To confirm an action, like deleting an item.
To display quick tips or updates without blocking the page.
To notify users about background tasks finishing.
Syntax
Bootsrap
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Title</strong>
    <small>Time</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Message text goes here.
  </div>
</div>

The role="alert" and aria-live="assertive" help screen readers announce the toast.

The btn-close button lets users close the toast manually.

Examples
A simple success toast with a close button and timestamp.
Bootsrap
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Success</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Your changes have been saved.
  </div>
</div>
A warning toast with background color and text color changed for emphasis.
Bootsrap
<div class="toast bg-warning text-dark" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Warning</strong>
    <small>2 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Your connection is unstable.
  </div>
</div>
Sample Program

This page shows a button. When clicked, a toast notification appears at the bottom right corner. The toast can be closed by the user.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Toast Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-5">
    <h1>Toast Notification Demo</h1>
    <button id="showToastBtn" class="btn btn-primary mb-3">Show Toast</button>

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div id="myToast" 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" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          This is a toast notification example.
        </div>
      </div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const toastEl = document.getElementById('myToast');
    const toast = new bootstrap.Toast(toastEl);
    document.getElementById('showToastBtn').addEventListener('click', () => {
      toast.show();
    });
  </script>
</body>
</html>
OutputSuccess
Important Notes

Toasts are usually placed in a container with position-fixed so they stay visible on screen.

Use JavaScript to show or hide toasts dynamically.

Make sure to include Bootstrap's CSS and JS files for toasts to work.

Summary

Toast notifications show brief messages without blocking the user.

They include a header, message body, and close button.

Use Bootstrap's JavaScript API to control when to show or hide them.