<div class="position-fixed top-0 end-0 p-3" style="z-index: 99999">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="../assets/images/favicon.svg" class="img-fluid m-r-5" alt="images" style="width: 17px">
      <strong class="me-auto">Able Pro</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>
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="bg-dark p-4 mb-2">
  <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="../assets/images/favicon.svg" class="img-fluid m-r-5" alt="images" style="width: 17px">
      <strong class="me-auto">Able Pro</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>

<div class="bg-body toast-container p-4 mb-2">
  <div class="toast text-white bg-primary fade show" 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 text-white bg-secondary fade show" 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 text-white bg-success fade show" 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 text-white bg-warning fade show" 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 text-white bg-danger fade show" 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 text-white bg-info fade show" 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 text-white bg-dark fade show" 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>

<div class="bg-body p-4 mb-2">
  <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="../assets/images/favicon.svg" class="img-fluid m-r-5" alt="images" style="width: 17px">
      <strong class="me-auto">Able Pro</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>

<div class="bg-body toast-container p-4 mb-2">
  <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="../assets/images/favicon.svg" class="img-fluid m-r-5" alt="images" style="width: 17px">
      <strong class="me-auto">Able Pro</strong>
      <small>9 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 class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="../assets/images/favicon.svg" class="img-fluid m-r-5" alt="images" style="width: 17px">
      <strong class="me-auto">Able Pro</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>

<div class="bg-body toast-container p-4 mb-2">
  <div class="toast fade show" 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 fade show" 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-light-primary btn-sm  mb-1 me-1">Take action</button>
        <button type="button" class="btn btn-light-danger btn-sm  mb-1 me-1" data-bs-dismiss="toast">Close</button>
      </div>
    </div>
  </div>
</div>