Copy to clipboard

   Open in CodePen

<div class="position-relative border" aria-live="polite" aria-atomic="true" style="min-height: 335px;">
  <div class="toast-container position-absolute top-0 end-0">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header">
        <strong class="me-auto">Toast header</strong>
        <small>9 minutes ago</small>
        <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Toast body text goes here. Toast body text goes here.</div>
    </div>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header">
        <strong class="me-auto">Toast header</strong>
        <small>9 minutes ago</small>
        <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Toast body text goes here. Toast body text goes here.</div>
    </div>
  </div>
</div>