Toast

 <!-- Knapp som triggar toasten -->
<button type="button" class="btn btn-primary" id="btnToast">Show Toast</button>  

<!-- Toast-komponenten -->
<div id="myToast" class="toast">
    <!-- Toastens header -->
    <div class="toast-header">
        <!-- Titel i toastens header -->
        <strong class="me-auto">Toast Header</strong>
        <!-- Knapp för att stänga toasten -->
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <!-- Toastens kropp -->
    <div class="toast-body">
        <p>Some text inside the toast body</p>
    </div>
</div>
<!-- JavaScript för att trigga toasten -->
<script>
    // Hämta elementet för att trigga toasten
    const toastTrigger = document.getElementById('btnToast');
    // Hämta toast-elementet
    const toastLiveExample = document.getElementById('myToast');
  
    // Kontrollera om elementen finns
    if (toastTrigger && toastLiveExample) {
        // Lägg till en klick-händelse på knappen
        toastTrigger.addEventListener('click', function() {
            // Skapa en ny toast-instans och visa den
            const toast = new bootstrap.Toast(toastLiveExample);
            toast.show();
        });
    }     
</script>

Toast exempel

The toast component is like an alert box that is only shown for a couple of seconds. It mimics the push notifications that have been popularized by mobile and desktop operating systems.

Some text inside the toast body