Alerts and Toasts

Alerts and Toasts

<!-- Alerts -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Success!</strong> Your record has been saved.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<div class="alert alert-danger">Error: something went wrong.</div>
<div class="alert alert-warning">Warning: low disk space.</div>
<div class="alert alert-info">Info: new update available.</div>

<!-- Toast (corner notification) -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="myToast" class="toast align-items-center text-bg-primary">
        <div class="d-flex">
            <div class="toast-body">Saved successfully!</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<script>
const toast = new bootstrap.Toast(document.getElementById("myToast"));
toast.show();
</script>