Toast Basic
<div class="container">
<div class="row">
<div class="col-6 mx-auto mt-7">
<div class="toast fade show p-2 mx-auto" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header border-0">
<i class="ni ni-diamond me-2"></i>
<span class="me-auto font-weight-bold">Soft UI Design</span>
<small class="text-body">11 mins ago</small>
<i class="fas fa-times text-md ms-3 cursor-pointer" data-bs-dismiss="toast" aria-label="Close"></i>
</div>
<hr class="horizontal dark m-0">
<div class="toast-body">
Hello, world! This is a notification message.
</div>
</div>
</div>
</div>