Toast alert in bootstrap 5

You need to load bootstrap 5, and jquery first

HTML:

<!--------------- Toaster for alerts--------------->
        <div class="toast-container position-fixed top-0 start-50 p-3">
          <div class="toast align-items-center text-bg-primary " id="liveToast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="1000">
              <div class="d-flex">
                <div class="toast-body" id="tost_body_text_sr787">
                  
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
            </div>
        </div>

JS:

function showAlert(text){
    $("#tost_body_text_sr787").text(text);
    const toast = new bootstrap.Toast(document.getElementById("liveToast"))
    toast.show()
    
}

USAGE:

showAlert("Hello, world! This is a toast message.22");