<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">
          <span class="me-auto font-weight-bold">Now 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>

<div class="container">
  <div class="row">
    <div class="col-6 mt-8 pt-3 mx-auto">
      <div class="toast fade show d-flex align-items-center justify-content-between bg-gradient-primary border-0 pe-2 mx-auto" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body text-white">
          Hello, world! This is a notification message.
        </div>
        <i class="fas fa-times text-md cursor-pointer pe-2 text-white" data-bs-dismiss="toast" aria-label="Close"></i>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-6 mx-auto">
      <div class="toast fade show p-2 mx-auto mt-7" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body text-center">
          Hello, world! This is a toast message.
          <hr class="horizontal dark">
          <div class="d-flex justify-content-center">
            <button type="button" class="btn bg-gradient-primary btn-sm me-2 mb-0">Take action</button>
            <button type="button" class="btn bg-gradient-secondary btn-sm mb-0" data-bs-dismiss="toast">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>