Bootstrap Toasts

Notificaciones ligeras y flexibles para tu aplicación web

¿Qué son los Toasts en Bootstrap?

Los toasts son notificaciones ligeras y no intrusivas diseñadas para imitar las notificaciones push que han sido popularizadas por los sistemas operativos móviles y de escritorio.

Características principales:
  • Son flexibles y se adaptan a cualquier contenido
  • No interrumpen la experiencia del usuario
  • Se pueden posicionar en cualquier parte de la pantalla
  • Incluyen animaciones de entrada y salida
  • Son accesibles con atributos ARIA
Usa toasts para: confirmaciones de acciones, alertas de sistema, notificaciones en tiempo real y mensajes de estado temporales.

Ejemplo 1 Toast Estático

Un toast que se muestra automáticamente al cargar la página usando la clase .show.

Código:
<div class="toast show" role="alert">
  <div class="toast-header">
    <strong class="me-auto">Notificación</strong>
    <small>Ahora</small>
    <button type="button" class="btn-close" 
            data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Mensaje enviado correctamente.
  </div>
</div>

Ejemplo 2 Toast Activado por Botón

Un toast que se activa al hacer clic en un botón, ideal para confirmar acciones del usuario.

JavaScript necesario:
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = 
    bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}

Ejemplo 3 Toast Automático con JavaScript

Un toast que se inicia automáticamente usando JavaScript al cargar la página.

JavaScript:
const toastEl = document.getElementById('autoToast')
const toast = new bootstrap.Toast(toastEl)
toast.show()

Ejemplo 4 Toast con Evento Personalizado

Integración del ejemplo Toast de éxito.

¡Éxito! Operación completada correctamente.
JavaScript:
const toastTrigger = document.getElementById('toastTrigger')
const toastAlert = document.getElementById('toastAlert')

if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastAlert)
    toast.show()
  })
}

Proyectos de Ejemplo

Gestor de Archivos

Toasts para confirmar operaciones con archivos: subida, eliminación y descarga.

Ver ejemplo

Formulario de Contacto

Validación de formulario con toasts para mensajes de éxito y error.

Ver ejemplo

E-Commerce

Simulación de Mercado Libre con toasts para carrito de compras y stock.

Ver ejemplo