Toasts
Default Toast
To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities. Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.
Congrats. You successfully read this message on a toast.
<div id="toastExample" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<p class="circle p-5 me-2 mb-0 bg-success"></p>
<strong class="me-auto">Success</strong>
<small>Just Now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div><!-- / toast-header -->
<div class="toast-body">
<p class="mb-0">Congrats. You successfully read this message on a toast.</p>
</div><!-- / toast-body -->
</div><!-- / toast -->
Notification Toast
Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup.
Default Notification Toast
-
Incoming Payment $29.99
Dark Notification Toast
-
Important Information This is a dark notification on a toast with .bg-info color
<!-- default notification toast -->
<div id="toastNotification" class="toast notification show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
<ul class="list-unstyled list-media mb-0 notification-content">
<li class="list-group-item bg-transparent p-0 mb-0 b-0">
<div class="list-media-content list-media-success">
<i class="bi-cash fs-18"></i>
</div><!-- / list-media-content -->
<div class="info">
<span class="sub-title">Incoming Payment</span>
<span class="title text-success fs-18 fw-bold mb-0">$29.99</span>
</div><!-- / info -->
</li><!-- / list-group-item -->
</ul>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div><!-- / toast-body -->
</div><!-- / toast -->
<!-- dark notification toast -->
<div id="toastNotificationTwo" class="toast notification show bg-info dark" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
<ul class="list-unstyled list-media mb-0 notification-content">
<li class="list-group-item bg-transparent p-0 mb-0 b-0">
<div class="list-media-content bg-white">
<i class="bi-info fs-24 text-info"></i>
</div><!-- / list-media-content -->
<div class="info">
<span class="d-block text-white mb-10 fw-bold">Important Information</span>
<span class="title text-light mb-0">This is a dark notification on a toast with .bg-info color</span>
</div><!-- / info -->
</li><!-- / list-group-item -->
</ul>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div><!-- / toast-body -->
</div><!-- / toast -->
Toast Colors
You can use .bg-* classes to change the background-color of the toasts, also add .dark-mode if you also want the .btn-close and the content text to change to a light color.
Primary Toast
Warning! Better check yourself.
Success Toast
Congrats! This is a success message.
<!-- primary toast -->
<div id="toastPrimary" class="toast show bg-primary dark-mode" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<p class="circle p-5 me-2 mb-0 bg-warning"></p>
<strong class="me-auto">Warning</strong>
<small>1 minute ago</small>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div><!-- / toast-header -->
<div class="toast-body">
<p class="mb-0">Warning! Better check yourself.</p>
</div><!-- / toast-body -->
</div><!-- / toast -->
<!-- success toast -->
<div id="toastPrimary" class="toast show bg-success dark-mode" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<p class="circle p-5 me-2 mb-0 bg-white"></p>
<strong class="me-auto">Success</strong>
<small>3 minutes ago</small>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div><!-- / toast-header -->
<div class="toast-body">
<p class="mb-0">Congrats! This is a success message.</p>
</div><!-- / toast-body -->
</div><!-- / toast -->
Toast Positions
The toasts has to be initialized via JavaScript, you can find more info in Bootstrap vDocs - Documentation Template & UI Kit
<button type="button" class="btn btn-primary" id="toastbtn-br">Bottom Right</button>
<!-- init JS -->
<script>
document.getElementById("toastbtn-br").onclick = function() {
var myAlert =document.getElementById('toastOne');//select id of toast
var bsAlert = new bootstrap.Toast(myAlert);//inizialize it
bsAlert.show();//show it
};
</script>
<!-- position bottom right -->
<div class="position-fixed bottom-15 right-15" style="z-index: 999999">
<div id="toastOne" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<p class="circle p-5 me-2 mb-0 bg-primary"></p>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div><!-- / toast-header -->
<div class="toast-body">
<p class="mb-0">Hello, world! This is a toast message.</p>
</div><!-- / toast-body -->
</div><!-- / toast -->
</div><!-- / position-fixed -->
<!-- / toastOne -->