Toast notifications in Bootsrap

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>

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.

Practice

1. What is the main purpose of a toast notification in Bootstrap?

easy

A. To show brief messages without interrupting the user

B. To create a full-page modal dialog

C. To replace the navigation bar

D. To style buttons with animations

Solution

1. Step 1: Understand the role of toast notifications

   Toast notifications are small popup messages that appear temporarily to inform users without blocking their actions.

2. Step 2: Compare with other UI elements

   Unlike modals or navigation bars, toasts are brief and non-intrusive messages.

3. Final Answer:

   To show brief messages without interrupting the user -> Option A

4. Quick Check:

   Toast = brief, non-blocking message [OK]

Hint: Toasts show quick messages without stopping user actions [OK]

Common Mistakes:

• Confusing toasts with modals
• Thinking toasts replace navigation
• Assuming toasts are for styling buttons

2. Which of the following is the correct HTML structure to create a basic Bootstrap toast?

easy

A. TitleMessage

B. TitleMessage

C. TitleMessage

D. TitleMessage

Solution

1. Step 1: Identify correct Bootstrap toast markup

   The toast requires a container with class 'toast' and accessibility roles. It includes a 'toast-header' with a title and close button, and a 'toast-body' for the message.

2. Step 2: Check each option's structure

   Title

   Message

   matches Bootstrap's official toast structure with correct classes and ARIA attributes. Others use invalid tags or missing classes.

3. Final Answer:

   Option A's HTML structure is correct -> Option A

4. Quick Check:

   Bootstrap toast = div.toast + header + body + close button [OK]

Hint: Look for div.toast with toast-header and toast-body classes [OK]

Common Mistakes:

• Using non-standard tags like <toast>
• Missing aria attributes
• Incorrect class names for toast parts

3. Given this code snippet, what will happen when the page loads?

<div class='toast show' role='alert' aria-live='assertive' aria-atomic='true'>
  <div class='toast-header'>
    <strong class='me-auto'>Notice</strong>
    <button type='button' class='btn-close' data-bs-dismiss='toast' aria-label='Close'></button>
  </div>
  <div class='toast-body'>Hello, world!</div>
</div>

medium

A. The toast will appear but without the close button

B. The toast will be hidden and require JavaScript to show

C. The toast will cause a JavaScript error

D. The toast will be visible immediately on page load

Solution

1. Step 1: Understand the 'show' class effect

   Adding the 'show' class to a toast makes it visible immediately without needing JavaScript to trigger it.

2. Step 2: Check the close button presence

   The close button is included with correct classes and attributes, so it will appear and function properly.

3. Final Answer:

   The toast will be visible immediately on page load -> Option D

4. Quick Check:

   Class 'show' = visible toast [OK]

Hint: Class 'show' makes toast visible without extra code [OK]

Common Mistakes:

• Assuming toast is hidden without JS
• Thinking close button is missing
• Confusing 'show' with 'fade'

4. This code tries to show a toast but it doesn't appear. What is the likely problem?

const toastEl = document.querySelector('.toast');
const toast = new bootstrap.Toast(toastEl);
toast.show();

medium

A. The toast element is missing the required 'toast' class

B. The Bootstrap JavaScript library is not loaded

C. The toast.show() method does not exist

D. The toast element must have the 'show' class initially

Solution

1. Step 1: Check if Bootstrap JS is loaded

   The toast JavaScript API requires Bootstrap's JavaScript library to be loaded. Without it, calling new bootstrap.Toast will fail silently or cause errors.

2. Step 2: Verify other code parts

   The toast element has the correct class, and toast.show() is a valid method. The 'show' class is added by the method, so it should not be present initially.

3. Final Answer:

   The Bootstrap JavaScript library is not loaded -> Option B

4. Quick Check:

   Bootstrap JS missing = toast.show() fails [OK]

Hint: Ensure Bootstrap JS is included before using toast API [OK]

Common Mistakes:

• Forgetting to include Bootstrap JS
• Adding 'show' class manually before JS
• Misusing toast.show() method

5. You want to create a toast that automatically disappears after 3 seconds and can be paused on hover. Which Bootstrap options should you use in JavaScript?

hard

A. new bootstrap.Toast(element, { autohide: false }) and manually hide after 3 seconds

B. new bootstrap.Toast(element, { delay: 3000, autohide: true, pauseOnHover: true })

C. new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause

D. new bootstrap.Toast(element, { delay: 3000, autohide: true }) and add data-bs-pause='true'

Solution

1. Step 1: Identify options for auto-hide and delay

   Bootstrap's toast accepts 'delay' in milliseconds and 'autohide' boolean to control automatic disappearance.

2. Step 2: Check for pause on hover support

   Bootstrap does not have a built-in 'pauseOnHover' option in its Toast API. Pausing on hover is typically done with CSS or custom JavaScript.

3. Step 3: Evaluate each option

   new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause uses delay and autohide with CSS :hover pause, which is the correct approach. new bootstrap.Toast(element, { delay: 3000, autohide: true, pauseOnHover: true }) uses a non-existent 'pauseOnHover' option. new bootstrap.Toast(element, { autohide: false }) and manually hide after 3 seconds disables autohide and requires manual hiding. new bootstrap.Toast(element, { delay: 3000, autohide: true }) and add data-bs-pause='true' uses a non-standard data attribute.

4. Final Answer:

   new bootstrap.Toast(element, { delay: 3000, autohide: true }) with CSS :hover pause -> Option C

5. Quick Check:

   delay + autohide + CSS hover pause = auto-hide with hover pause [OK]

Hint: Use delay, autohide, and CSS :hover to pause [OK]

Common Mistakes:

• Forgetting pause on hover requires CSS or JS
• Assuming 'pauseOnHover' is a valid option
• Setting autohide false and hiding manually