<!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
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"mt-4"
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
strong
>
Bootstrap 5 Toasts getOrCreateInstance() Method
</
strong
>
</
div
>
<
div
>
<
button
class
=
"btn btn-success mt-4"
id
=
"toastBtn"
onclick
=
"getOrCreateInstance_AND_ShowToast()"
>
getOrCreateInstance And Show Toast
</
button
>
<
br
>
<
button
class
=
"btn btn-danger mt-2"
id
=
"toastBtn"
onclick
=
"getOrCreateInstance_AND_HideToast()"
>
getOrCreateInstance And Hide Toast
</
button
>
<
div
id
=
"gfg"
class
=
"toast mt-5"
role
=
"alert"
>
<
div
class
=
"toast-header"
>
About GeeksforGeeks.
</
div
>
<
div
class
=
"toast-body"
>
<
p
class
=
"border-bottom"
>
GeeksforGeeks is a online computer science
portal for Geeks. It was founded in 2009
by Sandeep Jain, alumni of IIT-Roorkee.
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
function getOrCreateInstance_AND_ShowToast() {
let instance = bootstrap.Toast.getOrCreateInstance("#gfg");
instance.show();
}
function getOrCreateInstance_AND_HideToast() {
let instance = bootstrap.Toast.getOrCreateInstance("#gfg");
instance.hide();
}
</
script
>
</
body
>
</
html
>