El componente Toast de Bootstrap

Notificaciones push a tus visitantes con un toast, un mensaje de alerta liviano y fácilmente personalizable.

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

Cosas que debes saber al usar el complemento toast:

• Los toast son opcionales por motivos de rendimiento, por lo que debes inicializarlos tú mismo.
• Los toast se ocultarán automáticamente si no especificas autohide: false.

Nota

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 del componente Toast

Básico

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

Los toast son tan flexibles como necesites y requieren muy poco margen de beneficio. Como mínimo, requerimos un solo elemento que contenga su contenido y recomendamos encarecidamente un botón para descartar.

HTML

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <strong class="me-auto">Bootstrap</strong>
        <small>Hace 11 minutos</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
    </div>
    <div class="toast-body">
        ¡Hola mundo! Este es un mensaje de toast.
    </div>
</div>

Precaución

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 lograr compatibilidad con versiones anteriores, nuestro script continuará alternando la clase (aunque no sea necesario en la práctica) hasta la próxima versión principal.

Ejemplo en vivo

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

HTML

<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 fade hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                <rect width="100%" height="100%" fill="#007aff"></rect>
            </svg>
            <strong class="me-auto">Bootstrap</strong>
            <small>Hace 11 minutos</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></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/assets/js/snippets.js

site/assets/js/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úcidas para mezclarse con lo que hay debajo de ellos.

HTML

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true" focusable="false"
            preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <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="Cerrar"></button>
    </div>
    <div class="toast-body">
        ¡Hola mundo! Este es un mensaje de toast.
    </div>
</div>

Apilar

Puedes apilar toasts envolviéndolos en un recipiente para toasts, lo que agregará algo de espacio verticalmente.

HTML

<div class="toast-container position-static">
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true"
                focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                <rect width="100%" height="100%" fill="#007aff"></rect>
            </svg>
            <strong class="me-auto">Bootstrap</strong>
            <small class="text-body-secondary">justo ahora</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
        </div>
        <div class="toast-body">
            ¿Ves? Así como esto.
        </div>
    </div>

    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true"
                focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                <rect width="100%" height="100%" fill="#007aff"></rect>
            </svg>
            <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="Cerrar"></button>
        </div>
        <div class="toast-body">
            Atención, los toast se acumularán automáticamente
        </div>
    </div>
</div>

Contenido personalizado

Personaliza tus notificaciones eliminando subcomponentes, modificándolos con utilidades o agregando tu propio marcado. Aquí hemos creado un toast más simple eliminando el .toast-header predeterminado y agregando un ícono oculto personalizado de iconos de Bootstrap y usando algunas utilidades de flexbox para ajustar el diseño.

HTML

<div class="toast align-items-center fade show" 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 toast.

HTML

<div class="toast fade show" 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">Actúa</button>
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Cerrar</button>
        </div>
    </div>
</div>

Esquemas de colores

A partir del ejemplo anterior, puedes crear diferentes combinaciones de colores de toasts con nuestras utilidades de color y fondo. Aquí agregamos .text-bg-primary a .toast y luego agregamos .btn-close-white a nuestro botón de cerrar. Para obtener un borde nítido, eliminamos el borde predeterminado con .border-0.

HTML

<div class="toast align-items-center text-bg-primary border-0 fade show" 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>

Ubicación del componente Toast

Coloca toast con CSS personalizado cuando los necesites. La parte superior derecha se utiliza 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 directamente en .toast.

HTML

<form>
    <div class="mb-3">
        <label for="selectToastPlacement">Colocación de toasts</label>
        <select class="form-select mt-2" id="selectToastPlacement">
            <option value="" selected="">Selecciona una posición...</option>
            <option value="top-0 start-0">Arriba izquierda</option>
            <option value="top-0 start-50 translate-middle-x">Centro superior</option>
            <option value="top-0 end-0">Arriba a la derecha</option>
            <option value="top-50 start-0 translate-middle-y">Medio izquierdo</option>
            <option value="top-50 start-50 translate-middle">Centro medio</option>
            <option value="top-50 end-0 translate-middle-y">Medio derecho</option>
            <option value="bottom-0 start-0">Abajo izquierda</option>
            <option value="bottom-0 start-50 translate-middle-x">Centro inferior</option>
            <option value="bottom-0 end-0">Abajo a la 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 top-0 end-0" id="toastPlacement" data-original-class="toast-container p-3">
        <div class="toast fade show">
            <div class="toast-header">
                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true"
                    focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                    <rect width="100%" height="100%" fill="#007aff"></rect>
                </svg>
                <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 se puedan apilar fácilmente.

HTML

<div aria-live="polite" aria-atomic="true" class="position-relative">
    <!-- Position it: -->
    <!-- - `.toast-container` for spacing between toasts -->
    <!-- - `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 top-0 end-0 p-3">

        <!-- Then put toasts within -->
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true"
                    focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                    <rect width="100%" height="100%" fill="#007aff"></rect>
                </svg>
                <strong class="me-auto">Bootstrap</strong>
                <small class="text-body-secondary">justo ahora</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
            </div>
            <div class="toast-body">
                ¿Ves? Así como esto.
            </div>
        </div>

        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true"
                    focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                    <rect width="100%" height="100%" fill="#007aff"></rect>
                </svg>
                <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="Cerrar"></button>
            </div>
            <div class="toast-body">
                Atención, los toast se acumularán automáticamente
            </div>
        </div>
    </div>
</div>

También puedes usar las utilidades de Flexbox para alinear las tostadas horizontal y/o verticalmente.

HTML

<!-- 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 fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true"
                focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                <rect width="100%" height="100%" fill="#007aff"></rect>
            </svg>
            <strong class="me-auto">Bootstrap</strong>
            <small>Hace 11 minutos</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</div>

Accesibilidad del componente Toast

Los toast 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 toast en un aria-live (región). Los lectores de pantalla anuncian automáticamente los cambios en las regiones activas (como la inyección/actualización de un componente del sistema) sin necesidad de mover el enfoque del usuario ni interrumpirlo de otro modo. Además, incluye aria-atomic="true" para garantizar que todo el toast se anuncie siempre como una única unidad (atómica), en lugar de simplemente anunciar lo que se cambió (lo que podría generar problemas si solo actualizas parte del contenido del toast, o si se muestras el mismo contenido del 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 toast.

Ten en cuenta que la región en vivo 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, generalmente no serán anunciados por las tecnologías de asistencia.

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

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

HTML

<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 fade show" data-bs-autohide="false">
    <div class="toast-header">
        <svg class="bd-placeholder-img rounded me-2" width="20" height="20" aria-hidden="true" focusable="false"
            preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="#007aff"></rect>
        </svg>
        <strong class="me-auto">Bootstrap</strong>
        <small>Hace 11 minutos</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></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 notificación, debes evitar hacerlo para ocultar automáticamente las notificaciones. Incluso si le das al toast un delay tiempo de espera, a los usuarios de teclados y tecnologías de asistencia puede resultarles difícil llegar al toast a tiempo para tomar medidas ( ya que los toast no reciben foco cuando se muestran). Si es absolutamente necesario tener controles adicionales, le recomendamos utilizar un toast con autohide: false.

Personalización del CSS del componente

Variables Sass del componente

Agregado en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, los toast 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

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 Sass generales relacionadas

scss/_variables.scss

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 del componente Toast

Inicializar toast mediante JavaScript:

JavaScript

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

Desencadenantes

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

HTML

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

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

HTML

<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 agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de caso del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, utiliza 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 experimental reservado data-bs-config que puede albergar datos simples de configuración 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 sobrescribirá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 combinado de data-bs-config, data-bs- y js object donde el último valor-clave dado sobrescribe los demás.

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 después del retraso.
delay	número	5000	Retraso en milisegundos antes de ocultar el toast.

Métodos

Peligro

Todos los métodos API son asincrónicos e inician una transición. Regresan al punto de la llamada tan pronto como se inicia la transición, pero antes de que finalice. Además, se ignorará una llamada a un método en un componente en transición. Obtén más información en nuestra documentación de JavaScript.

Método	Descripción
dispose	Oculta el toast de un elemento. Su toast permanecerá en el DOM pero ya no se mostrará.
getInstance	Static método que te permite obtener la instancia del toast asociada con un elemento DOM. Por ejemplo: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Devuelve una instancia del sistema Bootstrap.
getOrCreateInstance	Static método que te permite obtener la instancia del 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 del sistema Bootstrap.
hide	Oculta el toast de un elemento. Vuelve al punto de la llamada antes de que el toast se haya ocultado (es decir, antes de que ocurra el evento hidden.bs.toast ). Tienes que llamar manualmente a este método si estableciste autohide en false.
isShown	Devuelve un valor booleano según el estado de visibilidad del toast.
show	Revela el toast de un elemento. Vuelve al punto de la llamada antes de que se haya mostrado el toast (es decir, antes de que ocurra el evento shown.bs.toast). Tienes que llamar manualmente a este método; en su lugar, tu toast no se mostrará.

Eventos

Evento	Descripción
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.
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 toast se hace visible para el usuario.

JavaScript

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