Toast Positioning & Auto-Hide

<!-- JavaScript -->
<script>
  document.getElementById("showBottomLeftToast").addEventListener("click", function () {
    var toastEl = new bootstrap.Toast(document.getElementById("bottomLeftToast"));
    toastEl.show();
  });
</script>

<!-- Bottom Left Toast -->
<div class="toast-container position-fixed bottom-0 start-0 p-3">
  <div class="toast" id="bottomLeftToast" data-bs-autohide="false">
    <div class="toast-header">
      <strong class="me-auto">Positioned Toast</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      This toast appears at the bottom-left corner.
    </div>
  </div>
</div>

<!-- Button to Show Toast -->
<button class="btn btn-success" id="showBottomLeftToast">Show Toast</button>