Toast notifications in Bootsrap - Mini Project: Build & Apply

Toast Notifications with Bootstrap

📖 Scenario: You are building a simple webpage that shows a toast notification to users when they perform an action, like saving a form. Toasts are small popup messages that appear briefly and then disappear.

🎯 Goal: Create a Bootstrap toast notification that appears in the top-right corner of the page with a header and body text. The toast should be dismissible by the user.

📋 What You'll Learn

Use Bootstrap 5 toast component structure

Place the toast container in the top-right corner using Bootstrap utilities

Include a toast header with a title and a close button

Include a toast body with a message

Make sure the toast can be dismissed by clicking the close button

💡 Why This Matters

🌍 Real World

Toast notifications are used in websites and apps to give quick feedback to users, like confirming a save or showing an error.

💼 Career

Knowing how to implement Bootstrap toasts helps you build user-friendly interfaces that communicate important messages clearly and accessibly.

1

Create the basic HTML structure with Bootstrap CSS link

Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and viewport meta tags. Include the Bootstrap 5 CSS CDN link inside the <head>. Add an empty <body> section.

Bootsrap

Hint

Remember to include the Bootstrap CSS link inside the <head> section for styling.

2

Add a container for the toast in the top-right corner

Inside the <body>, add a <div> with id="toastContainer" and Bootstrap classes position-fixed top-0 end-0 p-3 to place it in the top-right corner with some padding.

Bootsrap

    
    
    Bootstrap Toast Example
    




    

Hint

Use Bootstrap utility classes to fix the container to the top-right corner with padding.

3

Add the toast HTML structure inside the container

Inside the div with id="toastContainer", add a div with classes toast and show. Inside it, add a div with class toast-header containing a strong element with text Notification and a button with classes btn-close and ms-auto and attribute data-bs-dismiss="toast" and aria-label="Close". Below the header, add a div with class toast-body containing the text Your changes have been saved.

Bootsrap

    
    
    Bootstrap Toast Example
    




    

Hint

Follow Bootstrap's toast HTML structure exactly. The show class makes the toast visible.

4

Add Bootstrap JavaScript bundle for toast dismissal

Before the closing </body> tag, add the Bootstrap 5 JavaScript bundle CDN script tag to enable toast dismissal functionality.

Bootsrap

    
    
    Bootstrap Toast Example
    




    
        
            Notification
            
        
        
            Your changes have been saved.
        
    

Hint

Include the Bootstrap JavaScript bundle before the closing </body> tag to enable interactive components.

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