Skip to main content Skip to docs navigation
En GitHub

Toasts

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

En esta página

¿Qué es toast?

Los toasts son notificaciones livianas diseñadas para imitar las notificaciones automáticas 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 colocar.

Descripción general

Cosas que debes saber al usar el complemento de toast:

  • Los toasts son opcionales por motivos 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 media query prefers-reduced-motion. Consulta la sección de movimiento reducido de nuestra documentación de accesibilidad.

Ejemplos

Básico

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

Los toasts son tan flexibles como necesites y requieren muy poco marcado. Como mínimo, requerimos que un solo elemento contenga tu contenido “toasted” y recomendamos enfáticamente un botón para descartar (cerrar).

<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 compatibilidad con versiones anteriores, nuestro script continuará alternando la clase (aunque no haya una necesidad práctica de hacerlo) hasta la próxima versión major.

Ejemplo en vivo

Haz clic en el botón a continuación para mostrar un toast (ubicado 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 el toast en vivo</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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>

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

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translúcido

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

<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-muted">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éndolas en un recipiente para toasts, lo que agregará algo de espacio verticalmente.

<div class="toast-container">
  <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-muted">justo ahora</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-muted">2 seconds ago</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 eliminando el .toast-header predeterminado, agregando un ícono de ocultación personalizado de Iconos de Bootstrap, y usando algunas utilidades de flexbox para ajustar el diseño.

<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.

<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

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

<div class="toast align-items-center text-white 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>

Colocación

Coloca toast con CSS personalizado a medida que los necesites. La parte superior derecha se usa a menudo para notificaciones, al igual que la parte superior central. Si solo vas a mostrar un toast a la vez, coloca los estilos de posicionamiento justo en .toast.

Bootstrap Hace 11 minutos
¡Hola Mundo! Este es un mensaje de toast. 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Colocación 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">Superior izquierda</option>
      <option value="top-0 start-50 translate-middle-x">Superior central</option>
      <option value="top-0 end-0">Superior derecha</option>
      <option value="top-50 start-0 translate-middle-y">Medio izquierda</option>
      <option value="top-50 start-50 translate-middle">Medio central</option>
      <option value="top-50 end-0 translate-middle-y">Medio derecha</option>
      <option value="bottom-0 start-0">Inferior izquierda</option>
      <option value="bottom-0 start-50 translate-middle-x">Inferior central</option>
      <option value="bottom-0 end-0">Inferior derecha</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute 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 los sistemas que generan más notificaciones, considera usar un elemento envolvente para que puedan apilarse fácilmente.

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Posicionarlo: -->
  <!-- - `.toast-container` para espaciado entre toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` para posicionar el toasts en la esquina superior izquierda -->
  <!-- - `.p-3` para evitar que los toasts se peguen al borde del container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <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-muted">justo ahora</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-muted">2 seconds ago</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 pueden utilizarse las utilidades de flexbox para alinear los toasts horizontal y/o verticalmente.

<!-- Flexbox container para el alineamiento de toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <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 destinados a ser pequeñas interrupciones para tus visitantes o usuarios, por lo que para ayudar a aquellos con 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 del sistema) sin necesidad de mover el foco del usuario o interrumpirlo de otra manera. Además, incluye aria-atomic="true" para asegurarte de que todo los toasts se anuncien siempre como una sola unidad (atómica), en lugar de simplemente anunciar lo que se cambió (lo que podría ocasionar problemas si solo actualizas parte del contenido del toasts, o si muestras el mismo contenido de toast en un momento posterior). Si la información necesaria es importante para el proceso, p.e. para obtener una lista de errores en un formulario, utiliza el componente de alerta en lugar de toasts.

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

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

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

<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>

Al usar autohide: false, debes agregar un botón de cierre para permitir que los usuarios descarten el toast.

<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>

Si bien técnicamente es posible agregar controles enfocables/accionables (como botones o enlaces adicionales) en tu toast, debes evitar hacer esto para ocultar automáticamente los toasts. Incluso si das al toast un largo tiempo de espera delay, los usuarios de tecnología de asistencia y teclado pueden tener dificultades para llegar al toast a tiempo para tomar medidas (ya que los toasts no reciben atención cuando se muestran) . Si es absolutamente necesario tener controles adicionales, te recomendamos usar un toast con autohide: false.

Sass

Variables

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Uso

Inicializa los toasts a través de JavaScript: 

var toastElList = Array.prototype.slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Triggers

El descarte (cierre) se puede lograr con el atributo data en un botón dentro de toast como se muestra a continuación:

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

o en un botón fuera de toast usando data-bs-target como se muestra a continuación:

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

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-bs-, como en data-bs-animation="".

Nombre Tipo Por defecto Descripción
animation boolean true Aplicar una transición de fundido CSS al toast
autohide boolean true Ocultar automáticamente el toast
delay number 5000 Retraso en ocultar el toast (ms)

Métodos

Transiciones y métodos asíncronos

Todos los métodos de la API son asincrónicos e inician una transition. Regresan al lugar donde se realizó la llamada tan pronto como se inicia la transición, pero antes de que finalice. Además, se ignorará una llamada de método en un componente en medio de una transición.

Consulte nuestra documentación de JavaScript para obtener más información.

show

Revela el toast de un elemento. Regresa al punto de la llamada antes de que se muestre realmente el toast (es decir, antes de que ocurra el evento shown.bs.toast). Debes llamar manualmente a este método, caso contrario tu toast no se mostrará.

toast.show()

hide

Oculta el toast de un elemento. Regresa al punto de la llamada antes de que se haya ocultado realmente el toast (es decir, antes de que ocurra el evento hidden.bs.toast). Tienes que llamar manualmente a este método si asignaste autohide en false.

toast.hide()

dispose

Oculta el toast de un elemento. Tu toast permanecerá en el DOM pero ya no se mostrará.

toast.dispose()

getInstance

Método estático que te permite obtener la instancia de toast asociada con un elemento DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Devuelve una instancia de toast Bootstrap

getOrCreateInstance

Método estático que te permite obtener la instancia de toast asociada con un elemento DOM, o crear uno nuevo en caso de que no se haya inicializado

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Devuelve una instancia de toast Bootstrap

Eventos

Tipo de evento Descripción
show.bs.toast Este evento se activa inmediatamente cuando se llama al método de instancia show.
shown.bs.toast Este evento se activa cuando el usuario ya puede ver el toast.
hide.bs.toast Este evento se activa inmediatamente cuando se llama al método de instancia hide.
hidden.bs.toast Este evento se activa cuando el toast ha terminado de ocultarse al usuario. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // hacer algo...
})