<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>