Toasts en Bootstrap 5

Los toasts son pequeñas notificaciones que aparecen en la parte superior o inferior de la pantalla para comunicar información importante o para proporcionar retroalimentación al usuario.

En Bootstrap 5, los toasts son componentes muy útiles que te permiten mostrar mensajes temporales de manera discreta pero efectiva. En esta guía, exploraremos en detalle los toasts en Bootstrap 5, cómo utilizarlos en tus proyectos y proporcionaremos ejemplos prácticos para que puedas integrarlos fácilmente en tu desarrollo web.

¿Qué son los Toasts?

Los toasts son pequeñas ventanas emergentes que aparecen en la parte superior o inferior de la pantalla para mostrar mensajes breves al usuario. Son útiles para mostrar notificaciones de éxito, advertencia, error o información sin interrumpir la experiencia del usuario en el sitio web.

Los toasts son temporales y desaparecen automáticamente después de un tiempo determinado o cuando el usuario interactúa con ellos.

En Bootstrap 5, los toasts se implementan como componentes CSS y JavaScript que son fáciles de integrar en cualquier proyecto web.

Creación de Toasts en Bootstrap 5

Para crear toasts en Bootstrap 5, utilizamos las clases CSS predefinidas y los scripts JavaScript proporcionados por el framework. A continuación, se muestra cómo crear un toast básico en HTML:


<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Título del Toast</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
  </div>
  <div class="toast-body">
    Contenido del Toast
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

Este código crea un toast básico con un título y contenido. El atributo data-bs-dismiss="toast" en el botón de cierre indica que el toast se cerrará cuando el usuario haga clic en el botón.

Mostrando y Ocultando Toasts

Para mostrar y ocultar toasts en Bootstrap 5, necesitamos utilizar JavaScript para controlar su comportamiento. Bootstrap proporciona métodos JavaScript para mostrar y ocultar toasts de manera programática.

Mostrar un Toast

Para mostrar un toast, primero necesitamos seleccionar el elemento del toast y luego llamar al método toast() y show() en él. Aquí está cómo hacerlo:

var myToast = document.querySelector('.toast');
var toast = new bootstrap.Toast(myToast);
toast.show();Lenguaje del código: JavaScript (javascript)

Ocultar un Toast

Para ocultar un toast, podemos llamar al método hide() en la instancia del toast. Por ejemplo:


toast.hide();

Lenguaje del código: HTML, XML (xml)

Ejemplos Prácticos de Toasts

Toast de Éxito


<div class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Éxito</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
  </div>
  <div class="toast-body">
    La operación se completó con éxito.
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

Toast de Advertencia


<div class="toast bg-warning text-dark" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Advertencia</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
  </div>
  <div class="toast-body">
    Esta acción puede ser irreversible.
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

Toast de Error


<div class="toast bg-danger text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Error</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
  </div>
  <div class="toast-body">
    Se produjo un error al procesar su solicitud.
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

Toast Personalizado


<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-primary text-white">
    <strong class="me-auto">Título Personalizado</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cerrar"></button>
  </div>
  <div class="toast-body">
    Contenido del Toast Personalizado
  </div>
</div>

Lenguaje del código: HTML, XML (xml)

Conclusiones

Los toasts en Bootstrap 5 son herramientas útiles para mostrar mensajes temporales de manera discreta pero efectiva en tus proyectos web. Con las clases predefinidas y los scripts JavaScript proporcionados por Bootstrap, puedes crear fácilmente toasts para comunicar información importante, notificaciones de éxito, advertencia, error o información al usuario.

Con esta guía y ejemplos prácticos, ahora tienes los conocimientos necesarios para integrar toasts en tus proyectos web con Bootstrap 5. ¡Aprovecha al máximo esta función para mejorar la experiencia del usuario en tu sitio web!