Las alertas clásicas de alert() o los cuadros rojos grandes son cosa del pasado. En 2026, la elegancia de los Toasts de Bootstrap 5 es el estándar de la industria.

Solución Rápida (Code Snippet)

Copia esta estructura para lanzar notificaciones desde cualquier parte de tu código JavaScript.

Contenedor de Toasts (HTML)

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Sistema</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body" id="toastMessage">
      ¡Operación exitosa!
    </div>
  </div>
</div>

Función para mostrar (JavaScript)

function showToast(mensaje, color = 'bg-primary') {
    const toastEl = document.getElementById('liveToast');
    const toastBody = document.getElementById('toastMessage');
    
    // Cambiar color y mensaje
    toastEl.classList.add(color, 'text-white');
    toastBody.innerText = mensaje;

    const toast = new bootstrap.Toast(toastEl);
    toast.show();
}

// Ejemplo de uso tras un Fetch
// showToast('Datos guardados correctamente', 'bg-success');

Cómo funciona

  1. toast-container: Es un contenedor invisible que posiciona las alertas (en este caso, abajo a la derecha).
  2. Instancia de Clase: Usamos new bootstrap.Toast(elemento) para convertir el HTML en un objeto interactivo de Bootstrap.
  3. Método show(): Dispara la animación de entrada. Por defecto, Bootstrap lo ocultará automáticamente tras 5 segundos (autohide: true).
  4. Colores Dinámicos: Al pasar clases como bg-success o bg-danger, podemos reutilizar el mismo Toast para éxitos o errores.

Ventajas UX

  • No Intrusivo: El usuario puede seguir trabajando mientras aparece la notificación.
  • Consistente: Mantiene la línea visual del resto de componentes de Bootstrap.

Enlaces Internos

Preguntas Frecuentes

¿Puedo mostrar varios Toasts a la vez?

Sí, el toast-container apilará automáticamente los Toasts nuevos encima de los viejos de forma ordenada.

¿Cómo cambio el tiempo de duración?

Pasa el parámetro delay en milisegundos al instanciar: new bootstrap.Toast(el, { delay: 3000 }).