Toasts

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

On this page

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

Descripción general

Cosas a saber cuando usas el plugin toast:

Los toasts son opt-in por motivos de rendimiento, así 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 toasts extensibles y predecibles, recomendamos un encabezado y un cuerpo. Los encabezados de los toasts usan display: flex, permitiendo una alineación fácil del contenido gracias a nuestras utilidades de margen y flexbox.

Los toasts son tan flexibles como necesites y tienen muy poco markup requerido. Como mínimo, requerimos un solo elemento para contener tu contenido “tostado” y recomendamos encarecidamente un botón de cierre.

¡Hola, mundo! Este es un mensaje toast.

<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>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Anteriormente, nuestros scripts añadían 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, por compatibilidad con versiones anteriores, nuestro script continuará alternando la clase (aunque no haya 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 ha estado oculto por defecto.

¡Hola, mundo! Este es un mensaje toast.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</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>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </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 integrarse con lo que hay debajo de ellos.

¡Hola, mundo! Este es un mensaje toast.

<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">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Apilado

Puedes apilar toasts envolviéndolos en un contenedor toast, que añadirá algo de espaciado vertical.

¿Ves? Así de simple.

Atención, los toasts se apilarán automáticamente

<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">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </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">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenido personalizado

Personaliza tus toasts eliminando subcomponentes, ajustándolos con utilidades, o agregando tu propio markup. Aquí hemos creado un toast más simple eliminando el .toast-header por defecto, agregando un icono de cierre personalizado de Bootstrap Icons, y usando algunas utilidades de flexbox para ajustar el diseño.

¡Hola, mundo! Este es un mensaje toast.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </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.

Hello, world! This is a toast message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Esquemas de colores

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

¡Hola, mundo! Este es un mensaje toast.

<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">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Ubicación

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

¡Hola, mundo! Este es un mensaje toast.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</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>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

¿Ves? Así de simple.

Atención, los toasts se apilarán automáticamente

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the 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">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </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">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

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

¡Hola, mundo! Este es un mensaje toast.

<!-- Flexbox container for aligning the 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>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Accesibilidad

Los toasts están diseñados para ser pequeñas interrupciones para tus visitantes o usuarios, así que para ayudar a quienes usan lectores de pantalla y tecnologías de asistencia similares, deberías envolver tus toasts en una región aria-live. Los cambios en las regiones en vivo (como inyectar/actualizar un componente toast) son anunciados automáticamente por los lectores de pantalla sin necesidad de mover el foco del usuario ni interrumpirlo de otra manera. Además, incluye aria-atomic="true" para asegurar que el toast completo siempre se anuncie como una sola unidad (atómica), en lugar de anunciar solo lo que cambió (lo que podría causar problemas si solo actualizas parte del contenido del toast, o si muestras el mismo contenido del toast en un momento posterior). Si la información necesaria es importante para el proceso, por ejemplo para una lista de errores en un formulario, entonces usa el componente alert en lugar de un toast.

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

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

A medida que cambia el contenido que muestras, asegúrate de actualizar el timeout de 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.

¡Hola, mundo! Este es un mensaje 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>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Aunque técnicamente es posible agregar controles enfocables/accionables (como botones o enlaces adicionales) en tu toast, deberías evitar hacer esto para toasts con auto-ocultado. Incluso si le das al toast un timeout de delay largo, los usuarios de teclado y tecnologías de asistencia pueden encontrar difícil llegar al toast a tiempo para tomar acción (ya que los toasts no reciben foco cuando se muestran). Si absolutamente necesitas controles adicionales, 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 vía JavaScript:

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

Disparadores

El cierre se puede lograr con el atributo data 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 usando data-bs-target 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

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

Nombre	Tipo	Predeterminado	Descripción
`animation`	boolean	`true`	Aplica una transición de desvanecimiento CSS al toast
`autohide`	boolean	`true`	Ocultar automáticamente el toast
`delay`	number	`5000`	Retrasar el ocultamiento del toast (ms)

Métodos

Métodos asíncronos y transiciones

Todos los métodos de la API son asíncronos e inician una transición. Vuelven al llamador tan pronto como se inicia la transición pero antes de que termine. Además, una llamada a un método en un componente en transición será ignorada.

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

show

Muestra el toast de un elemento. Retorna al llamador antes de que el toast se haya mostrado realmente (es decir, antes de que ocurra el evento shown.bs.toast). Debes llamar este método manualmente, de lo contrario tu toast no se mostrará.

toast.show()

hide

Oculta el toast de un elemento. Retorna al llamador antes de que el toast se haya ocultado realmente (es decir, antes de que ocurra el evento hidden.bs.toast). Debes llamar este método manualmente si configuraste 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 a un elemento del DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Método estático que te permite obtener la instancia de toast asociada a un elemento del DOM, o crear una nueva en caso de que no haya sido inicializada

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Eventos

Tipo de evento	Descripción
`show.bs.toast`	Este evento se dispara inmediatamente cuando se llama al método de instancia `show`.
`shown.bs.toast`	Este evento se dispara cuando el toast se ha hecho visible al usuario.
`hide.bs.toast`	Este evento se dispara inmediatamente cuando se ha llamado al método de instancia `hide`.
`hidden.bs.toast`	Este evento se dispara cuando el toast ha terminado de ocultarse del usuario.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})