Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Notifications
Bootstrap Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Toasts on Bootstrap
<!-- Basic -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/images/logo-sm.png" alt="brand-logo" height="16" class="me-1" />
<strong class="me-auto text-body">INSPINIA</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
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.
INSPINIA
11 mins ago
<!-- Then put toasts within -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-toggle="toast">
<div class="toast-header">
<img src="assets/images/logo-sm.png" alt="brand-logo" height="16" class="me-1" />
<strong class="me-auto text-body">INSPINIA</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
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.
INSPINIA
11 mins ago
<label for="selectToastPlacement">Toast placement</label>
<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 aria-live="polite" aria-atomic="true" class="bg-light position-relative bd-example-toasts" style="min-height:294px">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast show">
<div class="toast-header">
<img src="assets/images/logo-sm.png" alt="brand-logo" height="16" class="me-1" />
<strong class="me-auto text-body">INSPINIA</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
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.
INSPINIA
11 mins ago
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/images/logo-sm.png" alt="brand-logo" height="16" class="me-1" />
<strong class="me-auto text-body">INSPINIA</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>
Click the button below to show a toast (positioned with our utilities in the Toop Right corner) that has been hidden by default.
INSPINIA
11 mins ago
<!-- Translucent -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/images/logo-sm.png" alt="brand-logo" height="16" class="me-1" />
<strong class="me-auto text-body">INSPINIA</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements under a toast.
INSPINIA
11 mins ago
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div class="toast-container" style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/images/logo-sm.png" alt="brand-logo" height="16" class="me-1" />
<strong class="me-auto text-body">INSPINIA</strong>
<small class="text-muted">just now</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<!--end toast-->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/images/logo-sm.png" alt="brand-logo" height="16" class="me-1" />
<strong class="me-auto text-body">INSPINIA</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
<!--end toast-->
</div>
</div>
When you have multiple toasts, we default to vertiaclly stacking them in a readable manner.
INSPINIA
just now
INSPINIA
2 seconds ago
<div class="toast show align-items-center mb-2" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast show align-items-center text-white bg-primary border-0 mb-2" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast show mb-2" 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-primary btn-sm">Take
action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>