toast

In Bootstrap 5, toasts are lightweight, customizable alert messages designed for unobtrusive notifications. They are typically used for short, non-blocking messages, like "Saved successfully" or "New message received."

Basic Toast :

A basic toast includes the following structure:

Hello, world! This is a toast message.

Example

<strong class="me-auto">Toast Header</strong>

</div>

Hello, world! This is a toast message.

</div>

Try it yourself

Toast Triggers:

Toasts can be triggered by buttons or other events.

This is triggered by a button click!

Example

<strong class="me-auto">Notification</strong>

</div>

This is triggered by a button click!

</div>

document.getElementById('showToast').addEventListener('click', function () {

const toastEl = document.querySelector('.toast');

const toast = new bootstrap.Toast(toastEl);

toast.show();

});

</script>

Try it yourself

Automatic and Manual Dismissal:

By default, toasts dismiss themselves automatically after a delay (autohide is true).
You can configure the delay using the data-bs-delay attribute or in JavaScript.

This toast will disappear after 3 seconds!

Example

<button type="button" class="btn btn-primary" id="autoshowToast">Automatic Dismissal after 3 second</button>

<strong class="me-auto">Notification</strong>

</div>

This toast will disappear after 3 seconds!

</div>

<button type="button" class="btn btn-primary" id="manualshowToast">Automatic Dismissal after 5 second</button>

<strong class="me-auto">Notification</strong>

</div>

This toast will disappear after 3 seconds!

</div>

document.getElementById('autoshowToast').addEventListener('click', function () {

const toastEl = document.querySelector('#toast1');

const toast = new bootstrap.Toast(toastEl);

toast.show();

});

document.getElementById('manualshowToast').addEventListener('click', function () {

const toastEl = document.querySelector('#toast2');

const toast = new bootstrap.Toast(toastEl, { autohide: true, delay: 5000 });

toast.show();

});

</script>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.