forum

Home / DeveloperSection / Forums / Toaster with the Bootstrap library

Ask Question

Toaster with the Bootstrap library

Ethan Karla 276 28-Jul-2021

How to make a toaster with the Bootstrap library?

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Ethan Karla

Follow
An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

03-Aug-2021

 A toaster is a pop up message that appears on the window and fades after an interval of time. These are basically used to show the message either success or error message to the user.

Let's have an example to demonstrate toaster with the help of Bootstrap : 

<!DOCTYPE html>

<html lang='en'>

<head>

  <title>Bootstrap Toaster</title>

  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<body>
<div class='container my-5'>
    <h1>Bootstrap Toaster</h1>
  <button type='button' class='btn btn-primary' id='myBtn'>Open Toaster</button>
  <div class='toast'>
    <div class='toast-header'>
      Toast Header 
    </div>
    <div class='toast-body'>
      Some text inside the toast body 
    </div>
  </div>
</div>
<script>
    $(document).ready(function () { 
        $('#myBtn').click(function () { 
            $('.toast').toast('show'); 
        }); 
    }); 
</script>
</body>
</html>

Hope this will help you.

Happy Coding!

Liked By