--- title: "How to create a toaster with Bootstrap library?" description: "How to create a toaster with Bootstrap library?" author: "Ethan Karla" published: 2021-07-28 updated: 2026-05-27 canonical: https://answers.mindstick.com/qa/93876/how-to-create-a-toaster-with-bootstrap-library category: "web application" tags: ["web development", "web application development"] reading_time: 4 minutes --- # How to create a toaster with Bootstrap library? How to create a toaster with [Bootstrap library](https://answers.mindstick.com/qa/93859/how-to-make-a-button-groups-in-bootstrap-with-dropdown-menu-with-help-of-bootstrap-library)? ## Answers ### Answer by Ravi Vishwakarma Toasts are a notification bar designed to display notifications on mobile and desktop operating systems, built with Flexbox so they are easy to align and position. ```     Toast Example                            
       

Toast Example

               
           
                logo                 I am Toast Header                 5 mins ago                            
           
                I am the toast body, write any things in toast body.            
       
   
    ``` Output ![How to create a toaster with Bootstrap library?](https://answers.mindstick.com/questionanswer/ba47e536-2018-42b0-ba45-a56933030e42/images/fd82f7ee-369c-4706-9815-f7170c51cf79.png) \ ### Answer by Ravi Vishwakarma You can create toast notifications in Bootstrap using the built-in Toast component. Bootstrap provides styles and JavaScript behavior for showing temporary popup messages such as success alerts, warnings, or errors. Bootstrap documentation: [Bootstrap Toasts Documentation](https://getbootstrap.com/docs/5.3/components/toasts/) Here’s a complete example using Bootstrap 5. ## 1. Include Bootstrap ```html ``` ## 2. Add Toast HTML ```html
``` ## 3. Add a Button to Trigger Toast ```html ``` ## 4. Initialize Toast with JavaScript ```html ``` ## Complete Working Example ```html Bootstrap Toast Example
``` ## Optional Toast Settings You can customize behavior: ```javascript const toast = new bootstrap.Toast(toastElement, { // Auto hide autohide: true, // Delay before hiding (milliseconds) delay: 3000 }); ``` ## Common Toast Positions | Position | Classes | | --- | --- | | Top Right | `top-0 end-0` | | Top Left | `top-0 start-0` | | Bottom Right | `bottom-0 end-0` | | Bottom Center | `bottom-0 start-50 translate-middle-x` | Example: ```html
``` ## Different Toast Types ### Success ```html
``` ### Danger/Error ```html
``` ### Warning ```html
``` ### Info ```html
``` --- Original Source: https://answers.mindstick.com/qa/93876/how-to-create-a-toaster-with-bootstrap-library Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.