Skip to main content Skip to docs navigation
Ver en GitHub

Toasts

Envía notificaciones push a tus visitantes con un toast, un mensaje de alerta ligero y fácilmente ajustable.

En esta página

Los toasts son notificaciones ligeras diseñadas para imitar las notificaciones push que se han popularizado en los sistemas operativos móviles y de escritorio. Están construidos con flexbox, por lo que son fáciles de alinear y posicionar.

Resumen

Cosas que debes saber al usar el plugin de toast:

  • Los toasts son opt-in por razones de rendimiento, por lo que debes inicializarlos tú mismo.
  • Los toasts se ocultarán automáticamente si no especificas autohide: false.

El efecto de animación de este componente depende de la consulta de medios prefers-reduced-motion. Consulta la sección de movimiento reducido en nuestra documentación de accesibilidad.

Ejemplos

Básico

Para fomentar toasts extensibles y predecibles, recomendamos un encabezado (header) y un cuerpo (body). Los encabezados de toast usan display: flex, lo que permite una alineación fácil del contenido gracias a nuestras utilidades de margen y flexbox.

Los toasts son tan flexibles como necesites y requieren muy poco marcado. Como mínimo, requerimos un único elemento que contenga tu contenido "toasted" y recomendamos encarecidamente un botón de descarte.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>Hace 11 minutos</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    ¡Hola, mundo! Este es un mensaje de toast.
  </div>
</div>

Anteriormente, nuestros scripts agregaban dinámicamente la clase .hide para ocultar completamente un toast (con display:none, en lugar de solo con opacity:0). Esto ya no es necesario. Sin embargo, para mantener la compatibilidad con versiones anteriores, nuestro script continuará alternando la clase (aunque no hay una necesidad práctica para ello) hasta la próxima versión principal.

Ejemplo en vivo

Haz clic en el botón de abajo para mostrar un toast (posicionado con nuestras utilidades en la esquina inferior derecha) que se ha ocultado de forma predeterminada.

<button type="button" class="btn btn-primary" id="liveToastBtn">Mostrar toast en vivo</button>

<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">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>Hace 11 minutos</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      ¡Hola, mundo! Este es un mensaje de toast.
    </div>
  </div>
</div>

Utilizamos el siguiente JavaScript para activar nuestra demostración de toast en vivo:

site/src/assets/partials/snippets.js 
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

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

Translúcido

Los toasts son ligeramente translúcidos para mezclarse con lo que está debajo de ellos.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-body-secondary">Hace 11 minutos</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    ¡Hola, mundo! Este es un mensaje de toast.
  </div>
</div>

Apilamiento

Puedes apilar toasts envolviéndolos en un contenedor de toast (toast container), que agregará verticalmente algo de espaciado.

html 
<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">hace un momento</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      ¿Ves? Justo como esto.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">hace 2 segundos</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Atención, los toasts se apilarán automáticamente
    </div>
  </div>
</div>

Contenido personalizado

Personaliza tus toasts eliminando subcomponentes, ajustándolos con utilidades o agregando tu propio marcado. Aquí hemos creado un toast más simple al eliminar el .toast-header predeterminado, agregar un icono de ocultación personalizado de Bootstrap Icons y usar algunas utilidades de flexbox para ajustar el diseño.

html 
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      ¡Hola, mundo! Este es un mensaje de toast.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternativamente, también puedes agregar controles y componentes adicionales a los toasts.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    ¡Hola, mundo! Este es un mensaje de toast.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Tomar acción</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Cerrar</button>
    </div>
  </div>
</div>

Esquemas de color

Partiendo del ejemplo anterior, puedes crear diferentes esquemas de color de toast con nuestras utilidades de color y fondo. Aquí hemos agregado .text-bg-primary al .toast, y luego hemos agregado .btn-close-white a nuestro botón de cierre. Para un borde nítido, eliminamos el borde predeterminado con .border-0.

html 
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      ¡Hola, mundo! Este es un mensaje de toast.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Posicionamiento

Coloca los toasts con CSS personalizado según los necesites. La esquina superior derecha se usa a menudo para las notificaciones, al igual que la parte superior central. Si solo vas a mostrar un toast a la vez, coloca los estilos de posicionamiento directamente en el .toast.

Bootstrap Hace 11 minutos
¡Hola, mundo! Este es un mensaje de toast.
html 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Posicionamiento del toast</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Selecciona una posición...</option>
      <option value="top-0 start-0">Esquina superior izquierda</option>
      <option value="top-0 start-50 translate-middle-x">Superior central</option>
      <option value="top-0 end-0">Esquina superior derecha</option>
      <option value="top-50 start-0 translate-middle-y">Al medio a la izquierda</option>
      <option value="top-50 start-50 translate-middle">Al medio al centro</option>
      <option value="top-50 end-0 translate-middle-y">Al medio a la derecha</option>
      <option value="bottom-0 start-0">Esquina inferior izquierda</option>
      <option value="bottom-0 start-50 translate-middle-x">Inferior central</option>
      <option value="bottom-0 end-0">Esquina inferior derecha</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>Hace 11 minutos</small>
      </div>
      <div class="toast-body">
        ¡Hola, mundo! Este es un mensaje de toast.
      </div>
    </div>
  </div>
</div>

Para sistemas que generan más notificaciones, considera usar un elemento contenedor para que se puedan apilar fácilmente.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Posiciónalo: -->
  <!-- - `.toast-container` para el espaciado entre toasts -->
  <!-- - `top-0` y `end-0` para colocar los toasts en la esquina superior derecha -->
  <!-- - `.p-3` para evitar que los toasts se peguen al borde del contenedor  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Luego coloca los toasts dentro -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">hace un momento</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        ¿Ves? Justo como esto.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">hace 2 segundos</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Atención, los toasts se apilarán automáticamente
      </div>
    </div>
  </div>
</div>

También puedes ponerte creativo con las utilidades de flexbox para alinear los toasts horizontal y/o verticalmente.

html 
<!-- Contenedor Flexbox para alinear los toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Luego coloca los toasts dentro -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>Hace 11 minutos</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      ¡Hola, mundo! Este es un mensaje de toast.
    </div>
  </div>
</div>

Accesibilidad

Los toasts están pensados para ser pequeñas interrupciones para tus visitantes o usuarios, por lo que para ayudar a quienes usan lectores de pantalla y tecnologías de asistencia similares, debes envolver tus toasts en una región aria-live. Los lectores de pantalla anuncian automáticamente los cambios en las regiones activas (como inyectar/actualizar un componente de toast) sin necesidad de mover el foco del usuario o interrumpirlo. Además, incluye aria-atomic="true" para asegurarte de que todo el toast se anuncie siempre como una única unidad (atómica), en lugar de anunciar solo lo que se cambió (lo que podría generar problemas si solo actualizas parte del contenido del toast, o si muestras el mismo contenido del toast más adelante en el tiempo). Si la información necesaria es importante para el proceso, por ejemplo, para una lista de errores en un formulario, utiliza el componente de alerta en lugar del toast.

Ten en cuenta que la región activa debe estar presente en el marcado antes de que se genere o actualice el toast. Si generas dinámicamente ambos al mismo tiempo y los inyectas en la página, por lo general no serán anunciados por las tecnologías de asistencia.

También debes adaptar el role y el nivel de aria-live según el contenido. Si es un mensaje importante como un error, usa los atributos role="alert" aria-live="assertive"; de lo contrario, usa role="status" aria-live="polite".

A medida que cambie el contenido que estás mostrando, asegúrate de actualizar el tiempo de espera delay para que los usuarios tengan suficiente tiempo para leer el toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Cuando uses autohide: false, debes agregar un botón de cierre para permitir a los usuarios descartar el toast.

html 
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>Hace 11 minutos</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    ¡Hola, mundo! Este es un mensaje de toast.
  </div>
</div>

Aunque técnicamente es posible agregar controles enfocables/accionables (como botones o enlaces adicionales) en tu toast, debes evitar hacerlo en los toasts de ocultación automática. Incluso si le das al toast un tiempo de espera delay largo, a los usuarios de teclado y tecnologías de asistencia les puede resultar difícil llegar al toast a tiempo para tomar medidas (ya que los toasts no reciben foco cuando se muestran). Si absolutamente debes tener más controles, recomendamos usar un toast con autohide: false.

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, los toasts ahora usan variables CSS locales en .toast para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_toasts.scss 
--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Variables de Sass

scss/_variables.scss 
$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

Uso

Inicializa los toasts a través de JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Activadores

El descarte se puede lograr con el atributo data-bs-dismiss en un botón dentro del toast como se demuestra a continuación: 

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

o en un botón fuera del toast utilizando el data-bs-target adicional como se demuestra a continuación: 

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puedes añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de mayúsculas y minúsculas del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, usa data-bs-custom-class="beautifier" en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes admiten un atributo de datos reservado experimental data-bs-config que puede albergar una configuración simple del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos de datos separados anularán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado fusionado de data-bs-config, data-bs- y el js object (objeto js) donde el último par clave-valor proporcionado anula a los demás.

NombreTipoPredeterminadoDescripción
animationbooleantrueAplica una transición de desvanecimiento CSS al toast.
autohidebooleantrueOculta automáticamente el toast después del retraso.
delaynumber5000Retraso en milisegundos antes de ocultar el toast.

Métodos

Todos los métodos de la API son asíncronos e inician una transición. Devuelven el control al llamador tan pronto como se inicia la transición, pero antes de que termine. Además, se ignorará cualquier llamada a un método en un componente en transición. Más información en nuestra documentación de JavaScript.

MétodoDescripción
disposeDestruye el toast de un elemento. (Elimina los datos almacenados en el elemento DOM)
getInstanceMétodo estático que te permite obtener la instancia de toast asociada con un elemento DOM.
Por ejemplo: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Devuelve una instancia de toast de Bootstrap.
getOrCreateInstanceMétodo estático que te permite obtener la instancia de toast asociada con un elemento DOM, o crear una nueva en caso de que no haya sido inicializada.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Devuelve una instancia de toast de Bootstrap.
hideOculta el toast de un elemento. Devuelve el control al llamador antes de que el toast se haya ocultado realmente (es decir, antes de que ocurra el evento hidden.bs.toast). Debes llamar manualmente a este método si estableciste autohide en false.
isShownDevuelve un valor booleano según el estado de visibilidad del toast.
showRevela el toast de un elemento. Devuelve el control al llamador antes de que el toast se haya mostrado realmente (es decir, antes de que ocurra el evento shown.bs.toast). Tienes que llamar manualmente a este método; de lo contrario, tu toast no se mostrará.

Eventos

EventoDescripción
hide.bs.toastEste evento se dispara inmediatamente cuando se llama al método de instancia hide.
hidden.bs.toastEste evento se dispara cuando el toast ha terminado de ocultarse del usuario.
show.bs.toastEste evento se dispara inmediatamente cuando se llama al método de instancia show.
shown.bs.toastEste evento se dispara cuando el toast se ha hecho visible para el usuario.
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})