<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<div class="container mt-3">
<h3>Toast Events</h3>
<strong>show.bs.toast, </strong>
<strong>shown.bs.toast, </strong>
<strong>hide.bs.toast, </strong>
<strong>hidden.bs.toast </strong>
<p>Click on the button below to perform toast.</p>
<button type="button" class="btn btn-primary"
id="myShowBtn">
Show Toast
</button>
<div class="toast mt-3">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#myShowBtn").click(function () {
$('.toast').toast('show');
});
$('.toast').on('show.bs.toast', function () {
alert('The toast is about to be shown.');
});
$('.toast').on('shown.bs.toast', function () {
alert('The toast is now fully shown.');
});
$('.toast').on('hide.bs.toast', function () {
alert('The toast is about to be hidden.');
});
$('.toast').on('hidden.bs.toast', function () {
alert('The toast is now hidden.');
});
});
</script>
</body>
</html>