Bootstrap 5 Toasts Stacking
Last Updated :
29 Nov, 2022
Bootstrap 5 Toasts Stacking feature is used to wrap multiple toasts in a toast container which will increase the vertical spacing.
Toasts Stacking Classes: No special classes are used in Toasts Stacking, you just need to have knowledge of Bootstrap 5 Toasts.
Syntax:
<div class="toast-container">
<div class="toast">
<div class="toast-header">...</div>
<div class="toast-body">...</div>
</div>
...
</div>
Example 1: The following code demonstrates the Toasts Stacking feature using the Toasts Stacking Bootstrap 5 properties.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 > Bootstrap 5 Toasts Stacking </ h2 >
< button type = "button"
class = "btn btn-primary" id = "myBtn" >
Click Here
</ button >
< div class = "toast-container" >
< div class = "toast" >
< div class = "toast-header" >
Hi, welcome to
</ div >
< div class = "toast-body" >
GeeksforGeeks
</ div >
</ div >
< div class = "toast" >
< div class = "toast-header" >
Bootrap 5
</ div >
< div class = "toast-body" >
Toast Stacking
</ div >
</ div >
</ div >
< script >
$(document).ready(function () {
$('#myBtn').click(function () {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates the Toasts Stacking feature with logo and small text using the Toasts Stacking Bootstrap 5 properties.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 > Bootstrap 5 Toasts Stacking </ h2 >
< button type = "button"
class = "btn btn-primary" id = "myBtn" >
Click Here
</ button >
< div class = "toast-container" >
< div class = "toast" >
< div class = "toast-header" >
< img src =
class = "rounded me-2" alt = "LOGO"
style = "width:60px;" >
< strong class = "me-auto" >
GeeksforGeeks
</ strong >
< small class = "text-muted" >
GFG
</ small >
</ div >
< div class = "toast-body" >
GeeksforGeeks
</ div >
</ div >
< div class = "toast" >
< div class = "toast-header" >
< img src =
class = "rounded me-2"
alt = "LOGO" style = "width:60px;" >
< strong class = "me-auto" >
GeeksforGeeks Course on Bootstrap
</ strong >
< small class = "text-muted" >GFG</ small >
</ div >
< div class = "toast-body" >
Toast Stacking
</ div >
</ div >
</ div >
< script >
$(document).ready(function () {
$('#myBtn').click(function () {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.1/components/toasts/#stacking
Share your thoughts in the comments
Please Login to comment...