Toast Bootstrap 5

Toast (Tostada)

El componente Toast es similar a un cuadro de alerta, que se muestra durante unos segundos cuando ocurre algo (por ejemplo, cuando el usuario hace clic en un botón, envía un formulario, etc.).

Cómo crear Toast

Para crear Toast, utilice .toast clases, y agregue .toast-header y .toast-body.

Nota:Por defecto, el toast está oculto. Si desea mostrarlo, utilice .show clase. Si desea cerrarlo, utilice el elemento <button> y agregue data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Título del Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Texto dentro del cuerpo del Toast.
  </div>
</div>

Pruebe usted mismo

Abrir Toast

Para mostrar Toast mediante clic en un botón, debe inicializarlo con JavaScript: seleccione el elemento especificado y llame toast() Métodos.

Al hacer clic en el botón, el siguiente código mostrará todos los toast del documento:

Ejemplo

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList.forEach(toast => toast.show())
}
</script>

Pruebe usted mismo