Bootsrapmarkup~30 mins

Toast notifications in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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.

Need a hint?

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