Examples
Bootstrap11 mins ago
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Code Example
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> <em class="ni ni-cross icon"></em> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> Hello, world! This is a toast message. <div class="mt-2 pt-2 border-top"> <button type="button" class="btn btn-nmw btn-primary btn-sm">Take action</button> <button type="button" class="btn btn-nmw btn-secondary btn-sm" data-bs-dismiss="toast">Close</button> </div> </div> </div> <div class="toast align-items-center show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex align-items-center"> <div class="toast-body"> Hello, world! This is a toast message. </div> <button type="button" class="btn-close me-2 ms-auto" data-bs-dismiss="toast" aria-label="Close"> <em class="ni ni-cross icon"></em> </button> </div> </div> <div class="toast align-items-center text-white bg-primary border-0 show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex align-items-center"> <div class="toast-body"> Hello, world! This is a toast message. </div> <button type="button" class="btn-close btn-close-white me-2 ms-auto" data-bs-dismiss="toast" aria-label="Close"> <em class="ni ni-cross icon"></em> </button> </div> </div>
Live example
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
Bootstrap11 mins ago
Hello, world! This is a toast message.
Code Example
<button type="button" class="btn btn-nmw btn-primary" id="liveToastBtn">Show live toast</button> <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11"> <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> <em class="ni ni-cross icon"></em> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div>
Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
Bootstrapjust now
See? Just like this.
Bootstrap2 seconds ago
Heads up, toasts will stack automatically
Code Example
<div class="toast-container"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">Bootstrap</strong> <small class="text-muted">just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> <em class="ni ni-cross icon"></em> </button> </div> <div class="toast-body"> See? Just like this. </div> </div> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> <em class="ni ni-cross icon"></em> </button> </div> <div class="toast-body"> Heads up, toasts will stack automatically </div> </div> </div>