Bootstrap - Toasts Part 3: Activating Toasts

Toasts can be activated via JavaScript or data attributes.

Examples and Explanation

Auto-Activation

<div class="toast show">

    <div class="toast-body">

        This toast shows automatically on page load.

    </div>

</div>

Explanation: Adding the show class makes the toast visible without JavaScript.

JavaScript Activation

<div class="toast" id="toastExample">

    <div class="toast-body">This toast is triggered via JavaScript.</div>

</div>

<script>

    const toastEl = document.getElementById('toastExample');

    const toast = new bootstrap.Toast(toastEl);

    toast.show();

</script>

Explanation: Use Bootstrap's JavaScript API to programmatically show or hide a toast.

Triggering via Button

<button class="btn btn-primary" onclick="toast.show()">Show Toast</button>

Explanation: Linking a button to toast activation makes notifications interactive.