A toast is like a push notification or kind of an alert box that appears on a screen for a few seconds when some action is performed and disappears automatically after 5 seconds. Toasts are built using flexbox which means that you can align and position them easily as your requirement.

This article is designed to give you the knowledge about

Creating Toast

To create a toast, take two divs with the class .toast-header, .toast-body and wrap them inside a

with the class .toast, also give a unique id to this div. Then use this id to connect a button with toast that will trigger the toast.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1.gif" height="322" src="data:image/svg xml,” width=”596″>

Code

<div class=“container mt-3”>


    <h1>Basic Toast</h1>


    <<button type=“button” class=“btn btn-warning text-light” id=“TBtn”>Toast</button>


    <div class=“toast-container mt-3”>


        <div id=“bt” class=“toast”>


          <div class=“toast-header bg-warning text-light”>


             <h5>Toast Header</h5>


          </div>


          <div class=“toast-body”>


             This article is about Bootstrap 5 Toasts.


          </div>


        </div>


      </div>


    </div>


   

<script>


   document.querySelector(“#TBtn”).onclick = function()


   {


     new bootstrap.Toast(document.querySelector(‘#bt’)).show();


   }

</script>

This is how a basic toast is created.

Positioning the Toast

To position a toast anywhere on a screen, you can simply use css positioning properties to show your toast anywhere on a screen.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image3.gif" height="382" src="data:image/svg xml,” width=”727″>

Code

<div class=“toast-container mt-3”>


        <div id=“bt” class=“toast” style=“position: absolute; bottom: 35%; left:70%;”>


          <div class=“toast-header bg-warning text-light”>


             <h5>Toast Header</h5>


          </div>


          <div class=“toast-body”>


             This article is about Bootstrap 5 Toasts.


          </div>


        </div>


      </div>

As you see in the above example I placed my toast in the bottom right corner using inline css.

Stacked Toasts

In bootstrap 5, you can also stack the toasts if there are more than one toast. To stack a toast simply

Add multiple toasts in a single

and give position according to your choice.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image2.gif" height="382" src="data:image/svg xml,” width=”727″>

Code

<div style=“position: absolute; bottom: 35%; left:70%;”>


        <div id=“bt” class=“toast show” >


          <div class=“toast-header bg-warning text-light”>


             <h5>Toast Header</h5>


          </div>


          <div class=“toast-body”>


             This article is about Bootstrap 5 Toasts.


          </div>


        </div>


         


        <div class=“toast show”>


            <div class=“toast-header bg-warning text-light”>


               <h5>Toast Header</h5>


            </div>


            <div class=“toast-body”>


               This article is about Bootstrap 5 Toasts.


            </div>


          </div>


    </div>

This is how you stack toasts.

Data attributes for Toast

If you don’t want to hide your toast automatically then use data-autohide=“false” attribute with .toast class and if you want your toast to stay longer then use data-delay=“value in milliseconds” attribute like 3000=3sec. By default the value of delay is 1000 milliseconds but you can change by using data-delay attribute.

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image4.gif" height="382" src="data:image/svg xml,” width=”727″>

Code

<div style=“position: absolute; bottom: 35%; left:70%;”>


        <div id=“bt” class=“toast” data-delay=“3500” >


          <div class=“toast-header bg-warning text-light”>


             <h5>Toast Header</h5>


          </div>


          <div class=“toast-body”>


             This article is about Bootstrap 5 Toasts.


          </div>


        </div>


         


        <div class=“toast” data-autohide=“false”>


            <div class=“toast-header bg-warning text-light”>


               <h5>Toast Header</h5>


            </div>


            <div class=“toast-body”>


               This article is about Bootstrap 5 Toasts.


            </div>


          </div>


    </div>

As you clearly see the difference in the above example, the first toast hides automatically after 3.5 seconds, while the second toast remains due to data-autohide=”false” attribute.

Conclusion

Toasts are created using a

with .toast class, then wrap .toast-header div and .toast-body div inside .toast div. To open a toast you can use .show class with .toast class or you can write a javascript code to open it by giving id to the  .toast class.Toasts are hidden by default that’s why we use .show class.

About the author

<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg" height="112" src="data:image/svg xml,” width=”112″>

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

Show Comments