<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
rel
=
"stylesheet"
integrity
=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin
=
"anonymous"
>
integrity
=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"container mt-3"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
h3
>Bootstrap 5 Toasts show() Method</
h3
>
<
p
class
=
"mt-4"
>
The button below is used to trigger the toast.
</
p
>
<
button
type
=
"button"
class
=
"btn btn-success"
id
=
"toastbtn-1"
>Show Toast 1</
button
>
<
button
type
=
"button"
class
=
"btn btn-success"
id
=
"toastbtn-2"
>Show Toast 2</
button
>
<
div
class
=
"toast-container"
>
<
div
class
=
"toast"
id
=
"toast-1"
>
<
div
class
=
"toast-header"
>
<
img
src
=
class
=
"img-thumbnail rounded me-2"
width
=
"40px"
alt
=
"GFG Logo"
>
<
strong
class
=
"me-auto"
>
Welcome to GeeksforGeeks
</
strong
>
<
button
type
=
"button"
class
=
"btn-close"
data-bs-dismiss
=
"toast"
></
button
>
</
div
>
<
div
class
=
"toast-body"
>
<
p
>
This is a computer science
portal for geeks.
</
p
>
</
div
>
</
div
>
<
div
class
=
"toast"
id
=
"toast-2"
>
<
div
class
=
"toast-header"
>
<
img
src
=
class
=
"img-thumbnail rounded me-2"
width
=
"40px"
alt
=
"GFG Logo"
>
<
strong
class
=
"me-auto"
>
This is GeeksforGeeks
</
strong
>
<
button
type
=
"button"
class
=
"btn-close"
data-bs-dismiss
=
"toast"
></
button
>
</
div
>
<
div
class
=
"toast-body"
>
<
p
>
This is a place to get quality
informative articles.
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
document.getElementById("toastbtn-1")
.onclick = function () {
var toastElList = [].slice.call(
document.querySelectorAll('#toast-1'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
document.getElementById("toastbtn-2")
.onclick = function () {
var toastElList = [].slice.call(
document.querySelectorAll('#toast-2'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</
script
>
</
body
>
</
html
>