<div class="container">
  <div class="row">
    <div class="col-6 mx-auto mt-7">
      <div class="toast bg-gradient-dark fade show p-2 mx-auto" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header border-0 bg-transparent">
          <i class="material-symbols-rounded me-2 text-white">diamond</i>
          <span class="me-auto font-weight-bold text-white">Material Design</span>
          <small class="text-white">11 mins ago</small>
          <i class="fas fa-times text-md ms-3 cursor-pointer text-white" data-bs-dismiss="toast" aria-label="Close"></i>
        </div>
        <hr class="horizontal light m-0">
        <div class="toast-body text-white">
          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-dark 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-dark 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>