Notifications
Bootstrap Toasts
Default Toast
Use toast
class to set a default toast.
Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over.
Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
Placement
Place toasts with custom CSS as you need them.
The top right
is often used
for notifications, as is the top middle. If you’re only ever
going to show one toast
at a time, put
the positioning styles right on the .toast
.
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
HTML Preview
<!-- Default Toast --> <div class="toast fade show" role="alert" aria-live="assertive" data-bs-autohide="false" aria-atomic="true"> <div class="toast-header"> <img src="assets/images/logo-sm.png" class="rounded me-2" alt="..." height="20"> <span class="fw-semibold me-auto">Hybrix</span> <small>06 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div>
<!-- Translucent Toast --> <div class="p-3 bg-light"> <div class="toast fade show" role="alert" aria-live="assertive" data-bs-autohide="false" aria-atomic="true"> <div class="toast-header"> <img src="assets/images/logo-sm.png" class="rounded me-2" alt="..." height="20"> <span class="fw-semibold me-auto">Hybrix</span> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div>
<!-- Stacking Toast --> <div class="toast fade show" role="alert" aria-live="assertive" data-bs-autohide="false" aria-atomic="true"> <div class="toast-header"> <img src="assets/images/logo-sm.png" class="rounded me-2" alt="..." height="20"> <span class="fw-semibold me-auto">Hybrix</span> <small>Just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> See? Just like this. </div> </div>
<!-- Placement Toast --> <div class="bg-light" aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-toggle="toast" style="position: absolute; top: 16px; right: 16px;"> <div class="toast-header"> <img src="assets/images/logo-sm.png" class="rounded me-2" alt="..." height="20"> <span class="fw-semibold me-auto">Hybrix</span> <small>06 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div>
<!-- Flexbox container for aligning the toasts --> <div aria-live="polite" aria-atomic="true" class="bg-light d-flex justify-content-center align-items-center" style="height: 200px;"> <div class="toast fade show" role="alert" aria-live="assertive" data-bs-autohide="false" aria-atomic="true"> <div class="toast-header"> <img src="assets/images/logo-sm.png" class="rounded me-2" alt="..." height="20"> <span class="fw-semibold me-auto">Hybrix</span> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div>
Toast Placement
Various example of toast placement
.
HTML Preview
<!-- Toast placement --> <form> <div class="mb-3"> <select class="form-select mt-2" id="selectToastPlacement"> <option value="" selected>Select a position...</option> <option value="top-0 start-0">Top left</option> <option value="top-0 start-50 translate-middle-x">Top center</option> <option value="top-0 end-0">Top right</option> <option value="top-50 start-0 translate-middle-y">Middle left</option> <option value="top-50 start-50 translate-middle">Middle center</option> <option value="top-50 end-0 translate-middle-y">Middle right</option> <option value="bottom-0 start-0">Bottom left</option> <option value="bottom-0 start-50 translate-middle-x">Bottom center</option> <option value="bottom-0 end-0">Bottom right</option> </select> </div> </form>
<div aria-live="polite" aria-atomic="true" class="bd-example bg-light position-relative" style="height: 300px;"> <div class="toast-container position-absolute p-3" id="toastPlacement"> <div class="toast"> <div class="toast-header"> <img src="assets/images/logo-sm.png" class="rounded me-2" alt="..." height="20"> <strong class="me-auto">Hybrix</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div>
Bordered with Icon Toast
Use toast-border-
with below-mentioned color variation to set a toast with border and icon.
Your application was successfully sent.
Yey! Everything worked!
Something went wrong, try again.
Something is very wrong! See detailed report.
HTML Preview
<!-- Bordered With Icon Toast --> <div class="hstack flex-wrap gap-2"> <button type="button" class="btn btn-primary" id="borderedToast1Btn">Primary toast</button> <button type="button" class="btn btn-success" id="borderedToast2Btn">Success toast</button> <button type="button" class="btn btn-warning" id="borderedTost3Btn">Warning toast</button> <button type="button" class="btn btn-danger" id="borderedToast4Btn">danger toast</button> </div>
<div style="z-index: 11"> <div id="borderedToast1" class="toast toast-border-primary overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0 me-2"> <i class="ri-user-smile-line align-middle"></i> </div> <div class="flex-grow-1"> <h6 class="mb-0">Your application was successfully sent.</h6> </div> </div> </div> </div> </div>
<div style="z-index: 11"> <div id="borderedToast2" class="toast toast-border-success overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0 me-2"> <i class="ri-checkbox-circle-fill align-middle"></i> </div> <div class="flex-grow-1"> <h6 class="mb-0">Yey! Everything worked!</h6> </div> </div> </div> </div> </div>
<div style="z-index: 11"> <div id="borderedTost3" class="toast toast-border-warning overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0 me-2"> <i class="ri-notification-off-line align-middle"></i> </div> <div class="flex-grow-1"> <h6 class="mb-0">Something went wrong, try again.</h6> </div> </div> </div> </div> </div>
<div style="z-index: 11"> <div id="borderedToast4" class="toast toast-border-danger overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> <div class="d-flex align-items-center"> <div class="flex-shrink-0 me-2"> <i class="ri-alert-line align-middle"></i> </div> <div class="flex-grow-1"> <h6 class="mb-0">Something is very wrong! <a href="javascript:void(0);" class="text-decoration-underline">See detailed report.</a></h6> </div> </div> </div> </div> </div>
Toastify JS
Use data-toast
data-toast-text=""
data-toast-gravity=""
data-toast-position=""
data-toast-className=""
data-toast-duration=""
data-toast-close="close"
data-toast-style="style"
as per your toast requirement.