<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Bootstrap 5</
title
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"mt-4"
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
strong
>
Bootstrap 5 Toasts getInstance() Method
</
strong
>
</
div
>
<
div
>
<
button
type
=
"button"
class
=
"btn btn-success mt-4"
onclick
=
"getInstanceANDShowToast()"
>
getInstance And Show Toast
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger mt-4"
onclick
=
"getInstanceANDDisposeToast()"
>
getInstance And Dispose Toast
</
button
>
<
div
id
=
"gfg"
class
=
"toast mt-5"
role
=
"alert"
>
<
div
class
=
"toast-header"
>
Demo Survey Question.
</
div
>
<
div
class
=
"toast-body"
>
<
p
class
=
"border-bottom mb-3 pb-2"
>
Are you interested in Interview Preparation?
</
p
>
<
button
type
=
"button"
class
=
"btn btn-success btn-sm"
data-bs-dismiss
=
"toast"
>
Yes
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger btn-sm"
data-bs-dismiss
=
"toast"
>
No
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
new bootstrap.Toast(document.querySelector("#gfg"));
function getInstanceANDShowToast() {
bootstrap.Toast.getInstance("#gfg").show();
}
function getInstanceANDDisposeToast() {
bootstrap.Toast.getInstance("#gfg").dispose();
}
</
script
>
</
body
>
</
html
>