Novedades en Bootstrap 5

Bootstrap es una de las bibliotecas CSS más populares. Permite a los desarrolladores utilizar fácilmente estilos y componentes atractivos y crear sitios web receptivos. El uso de Bootstrap puede ahorrar tiempo a los desarrolladores, especialmente con componentes que se utilizan en casi todos los proyectos.

Bootstrap 5 (la versión principal actual, lanzada en mayo de 2021) ha traído consigo un montón de cambios e mejoras, incluyendo la adición de nuevos componentes, nuevas clases, nuevos estilos para componentes antiguos, soporte de navegador actualizado, eliminación de algunos componentes antiguos, y mucho más.

En este artículo, cubriremos lo que ha cambiado en Bootstrap 5, lo que se ha eliminado y, lo más emocionante, lo que es nuevo.

Cuándo usar Bootstrap (y cuándo no)

Bootstrap se promociona como “el marco de trabajo más popular del mundo para construir sitios con diseño responsivo y pensados para móviles”, y con 152k estrellas en GitHub, no creo que esa afirmación esté muy alejada de la realidad. Especialmente para principiantes, Bootstrap es una excelente manera de comenzar a crear sitios web modernos y limpios. Facilita la realización de diseños complejos y pensados para móviles, y proporciona muchos componentes que probablemente necesitarás en varios proyectos.

Bootstrap tiene una curva de aprendizaje baja y se adapta bien a sitios web estáticos que no requieren un paso de compilación, ya que puedes simplemente referenciar la biblioteca desde el CDN de Bootstrap. Esto contrasta con otros marcos de trabajo CSS populares que podrían optimizarse para su uso con un empaquetador o gestor de tareas.

También debes tener en cuenta, sin embargo, que Bootstrap no es una solución milagrosa. Para los no iniciados, Bootstrap facilita la producción de marcado desordenado y complicado. También es una biblioteca relativamente pesada en términos de kilobytes (aunque esto mejora con cada versión), por lo que podría no ser la mejor opción si solo usas una o dos de sus características. Como con cualquier abstracción, te ayudará enormemente si tienes una buena comprensión de la tecnología subyacente y puedes tomar una decisión informada sobre cuándo usarla.

Actualizar de Bootstrap 4 a 5

Actualizar de Bootstrap 4 a 5 es generalmente bastante fácil. La mayoría de los componentes, sus clases y clases de utilidad que estaban disponibles en Bootstrap 4, todavía están disponibles en Bootstrap 5. Lo principal en lo que debes enfocarte al migrar es si las clases o componentes que estás usando han sido eliminados. Si han sido eliminados, hay reemplazos o formas de lograr el mismo resultado usando clases de utilidad. Lo segundo en lo que debes enfocarte es cambiar de data-* a data-bs-* en componentes que requieren JavaScript como parte de sus funcionalidades. (Cubriremos esto más en la siguiente sección.)

Si usas los archivos Sass de Bootstrap, hay algunas variables y mixins que han sido renombrados. Bootstrap 5 tiene una sección extensa y detallada sobre personalización, así como detalles sobre las variables Sass y mixins de cada componente en sus respectivas páginas de documentación.

Cambios en la Versión

Bootstrap 5 introduce cambios fundamentales en Bootstrap como biblioteca, con cambios en las dependencias requeridas, soporte para navegadores y más. También trae modificaciones en los componentes y clases que siempre hemos utilizado en versiones anteriores.

jQuery ya no es una dependencia

Como un cambio importante desde las versiones anteriores, jQuery ya no es una dependencia de Bootstrap. Ahora, puedes usar Bootstrap en toda su gloria sin él, pero aún necesitas Popper.js. Este cambio facilita el uso de Bootstrap en proyectos que no requieren o utilizan jQuery, como al usar Bootstrap con React.

Aún puedes usar jQuery con Bootstrap si forma parte de tu sitio web. Si Bootstrap detecta jQuery en el objeto window, automáticamente agregará todos los componentes al sistema de plugins de jQuery. Por lo tanto, si estás migrando de v4 a v5, no necesitas preocuparte por este cambio y aún puedes usar jQuery con Bootstrap según sea necesario.

¿Pero qué pasa si usas jQuery en tu sitio web y no quieres que Bootstrap lo use? Puedes hacerlo agregando el atributo data-bs-no-jquery al elemento body del documento:

<body data-bs-no-jquery="true">
</body>

¿Cómo funciona Bootstrap sin jQuery? Por ejemplo, en v4 usarías el siguiente código en JavaScript para crear un elemento Toast:

$('.toast').toast()

En Bootstrap 5, puedes usar ese mismo código para crear un elemento Toast si tu sitio web ya usa jQuery. Sin jQuery, necesitarás usar algo como el siguiente código para crear un elemento Toast:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

Esto simplemente utiliza JavaScript Vanilla para consultar el documento en busca de elementos con la clase .toast, luego inicializa un componente Toast en el elemento utilizando new bootstrap.Toast().

Cambio en el soporte del navegador

Hasta la versión 4, Bootstrap solía admitir Internet Explorer (IE) 10 y 11. A partir de Bootstrap 5, el soporte para IE ha sido eliminado por completo. Por lo tanto, si necesita admitir IE en su sitio web, probablemente deba tener cuidado al migrar a la versión 5.

Otros cambios en el soporte del navegador incluyen:

• Soporte para Firefox y Chrome a partir de la versión 60
• Soporte para Safari e iOS a partir de la versión 12
• Soporte para Android Browser y WebView a partir de la versión 6

Cambio en los atributos de datos

Bootstrap 5 ha cambiado la denominación de los atributos de datos que generalmente se utilizan en sus componentes que utilizan JavaScript como parte de su funcionalidad. Anteriormente, la mayoría de los componentes que dependían de alguna funcionalidad de JavaScript tendrían atributos de datos que comenzaban con data-. Por ejemplo, para crear un componente Tooltip en Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Tenga en cuenta el uso de data-toggle y data-placement. En Bootstrap 5, los atributos de datos para estos componentes ahora comienzan con data-bs para facilitar el nombre de espacio para los atributos de Bootstrap. Por ejemplo, para crear un componente Tooltip en Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

En lugar de usar data-toggle y data-placement, utilizamos data-bs-toggle y data-bs-placement. Si usas JavaScript para crear componentes en Bootstrap, probablemente no necesites hacer ningún cambio. Sin embargo, si tus componentes dependen únicamente de atributos de datos para funcionar, necesitas cambiar todos los atributos de datos que comienzan con data para que comiencen con data-bs.

Errores corregidos

En la documentación de Bootstrap 4 bajo Navegadores y dispositivos, hay una lista de errores que ocurren en algunos navegadores. Estos errores ya no se enumeran en la misma lista para Bootstrap 5. La lista incluye lo siguiente:

• El estilo de hover se aplicaba a elementos en eventos táctiles en iOS, lo cual no era deseable ya que se consideraba un comportamiento inesperado.
• El uso de .container en Safari 8 y superior causaba un pequeño tamaño de fuente al imprimir.
• El radio de borde se sobreescribía con el feedback de validación (pero se podía solucionar agregando una clase extra .has-validation).

La lista de errores e incidencias en la documentación de Bootstrap 4 también detalla errores que ocurrían en versiones de navegadores que ya no son compatibles.

Otras modificaciones

Hay muchas más modificaciones que son menores o no causan un cambio drástico y notable. Estas modificaciones son:

• Bootstrap 5 ahora utiliza Popper v2. Asegúrate de actualizar tu versión de Popper. Popper v1 ya no funcionará, ya que Bootstrap 5 requiere @popperjs/core en lugar del anterior popper.js.

• Bootstrap 5 ahora puede utilizarse como módulo en el navegador utilizando una versión de Bootstrap construida como módulo de ECMAScript.

• Como Libsass y Node Sass (que se utilizaron en Bootstrap 4) ahora están deprecados, Bootstrap 5 utiliza Dart Sass para compilar los archivos Sass fuente a CSS.

• Se han modificado algunos valores de variables Sass, como $zindex-modal que cambió de 1050 a 1060, $zindex-popover de 1060 a 1070, y otros más. Por ello, se recomienda revisar las variables Sass de cada componente o clases de utilidad en la documentación de Bootstrap 5.

• Anteriormente, para ocultar un elemento pero mantenerlo detectable para tecnologías de asistencia, se utilizaba la clase .sr-only. Esta clase ha sido reemplazada por .visually-hidden.

• Anteriormente, para ocultar un elemento interactivo pero mantenerlo detectable para tecnologías de asistencia, necesitabas usar las clases .sr-only y .sr-only-focusable. En Bootstrap 5, solo necesitas usar .visually-hidden-focusable sin .visually-hidden.

• Las citas con una fuente nombrada ahora están envueltas por un elemento <figure>.

  Aquí tienes un ejemplo de cómo están las citas ahora en Bootstrap 5:

• En versiones anteriores, los estilos de tabla se heredaban. Esto significa que si una tabla está anidada dentro de otra tabla, la tabla anidada heredará la tabla padre. En Bootstrap 5, los estilos de tabla son independientes entre sí, incluso si están anidados.

• Utilidades de borde ahora admiten tablas. Esto significa que ahora puedes cambiar el color del borde de una tabla utilizando las utilidades de color de borde.

  Aquí hay un ejemplo de uso de utilidades de borde con tablas en Bootstrap 5:

• El estilo predeterminado de los breadcrumbs ha cambiado, eliminando el fondo gris predeterminado, el relleno y el radio de borde que existían en versiones anteriores.

  Aquí tienes un ejemplo del estilo de los Breadcrumbs en Bootstrap 5:

• El nombramiento de clases que usaban left y right para referirse a la posición ha cambiado a usar start y end. Por ejemplo, .dropleft y .dropright en dropdowns han sido reemplazados por .dropstart y .dropend respectivamente.

• De manera similar al punto anterior, las clases utilitarias que usaban l para left y r para right ahora usan s para start y e para end respectivamente. Por ejemplo, .mr-* ahora es .me-*.

• La clase .form-control-range que se utilizaba para los inputs de rango ahora es .form-range.

• Los gutters ahora se establecen en rems en lugar de los anteriores px.

• .no-gutters ha sido renombrado a .g-0 como parte de las nuevas clases de gutters agregadas (más información en secciones posteriores).

• Los enlaces ahora están subrayados por defecto, incluso cuando no se hace hover sobre ellos.

• Los nombres de clase personalizados para elementos de formulario han cambiado de .custom-* para ser parte de las clases de componentes de formulario. Por ejemplo, .custom-check es reemplazado por .form-check, .custom-select es reemplazado por .form-select, y así sucesivamente.

• Agregar .form-label a las etiquetas ahora es requerido.

• Las alertas, las rutas de navegación, las tarjetas, los desplegables, los grupos de listas, los modales, las popovers y las herramientas de ayuda ahora utilizan los mismos valores de relleno utilizando la variable $spacer.

• El relleno predeterminado en elementos de insignia ahora ha cambiado de .25em/.5em a .35em/.65em.

• Los envoltorios para botones de alternancia se utilizan con casillas de verificación y botones de opción. La marca también se ha simplificado ahora. En Bootstrap 4, un botón de alternancia de casilla de verificación se lograba con el siguiente marcado:

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Marcado
    </label>
  </div>
  

  En Bootstrap 5, se puede hacer de una manera más simple:

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">Marcado</label>
  

• Los estados activo y hover de los botones ahora tienen un contraste mayor en color.

• Las imágenes de flecha de carro de Chevron ahora utilizan SVG de Bootstrap Icons.

• La clase de botón de cerrar ahora se renombra de .close a .btn-close, y utiliza un ícono SVG en lugar de ×.

• Las divisiones de menú desplegable ahora son más oscuras para mejorar el contraste.

• La barra de navegación ahora debería estar contenida dentro de un elemento de contenedor. Por ejemplo, en Bootstrap 4:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </nav>
  

  Se convierte en Bootstrap 5:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      ...
    </div>
  </nav>
  

• La clase .arrow en componentes popover ahora es reemplazada por .popover-arrow, y la clase .arrow en componentes Tooltip ahora es reemplazada por .tooltip-arrow.

• La opción de popover whiteList ha sido renombrada a allowList.

• La duración predeterminada de Toast se ha cambiado a 5 segundos.

• El valor predeterminado para fallbackPlacements en componentes de tooltip, dropdown y popover se ha cambiado al array ['top', 'right', 'bottom', 'left'].

• .text-monospace ha sido renombrado a .font-monospace.

• .font-weight-* ha sido renombrado a .fw-* y .font-style-* a .fst-*.

• .rounded-sm y .rounded-lg ahora han sido reemplazados por una gama de clases redondeadas .rounded-* desde 0 hasta 3.

Lo que se ha eliminado

El cambio puede tener un costo. Al salir una nueva versión que trae cambios y mejoras, también elimina algunas de las características antiguas que anteriormente admitía. Con esta nueva versión, algunos de los componentes, clases de utilidad u otras características de Bootstrap han sido eliminados.

La mayoría de los elementos eliminados de Bootstrap 5 fueron descartados porque se puede lograr lo mismo utilizando clases de utilidad en lugar de convertirlos en un componente independiente. Además, algunos elementos eliminados resultaron ser innecesarios o poco utilizados.

Aquí hay una lista de lo que se ha eliminado de Bootstrap 5:

• Como se mencionó en la sección anterior, se ha eliminado por completo el soporte para IE.

• Las clases de color de insignia (por ejemplo, .badge-primary) se han eliminado a favor del uso de las clases de utilidad de color (por ejemplo, .bg-primary).

• La clase de insignia .badge-pill, que daba a una insignia un estilo en forma de píldora, se ha eliminado a favor del uso de .rounded-pill, que logra el mismo resultado.

• La clase de botón .btn-block ha sido eliminada, ya que se puede lograr el mismo resultado utilizando clases de utilidad de display como .d-block.

• El diseño de tarjetas .card-columns Masonry que estaba disponible anteriormente ha sido eliminado, ya que tenía muchos efectos secundarios.

• La opción flip para componentes de menú desplegable ha sido eliminada, en favor de las configuraciones de Popper.

• El componente Jumbotron ha sido eliminado, ya que el mismo resultado se puede lograr utilizando clases de utilidad.

• Algunos de los clases utilitarias de orden (.order-*) se han eliminado, ya que anteriormente abarcaban desde 1 hasta 12. Ahora abarcan desde 1 hasta 5.

• El componente de medios se ha eliminado, ya que se puede lograr el mismo resultado con clases utilitarias.

• Las clases .thead-light y .thead-dark se han eliminado, ya que las clases variantes .table-* se pueden aplicar a todos los elementos de tabla.

• La clase .pre-scrollable se ha eliminado, ya que no se usa mucho.

• La clase .text-justify se ha eliminado, debido a problemas de respuesta, al igual que la clase .text-hide, porque su método es antiguo y no debería usarse. Y las clases .text-* ya no agregan estados de hover o focus a los enlaces. Esas clases .text-* deberían reemplazarse con clases .link-*.

• Los grupos de entrada que tienen múltiples entradas o componentes ya no necesitan usar .input-group-append y .input-group-prepend. Los elementos que deberían estar en el grupo pueden simplemente agregarse todos directamente como hijos del .input-group.

  Aquí hay un ejemplo de uso de grupos de entrada con múltiples entradas:

• .form-group, .form-row, y .form-inline han sido eliminados a favor de clases de diseño.

• .form-text ya no tiene una propiedad display establecida. La visualización del elemento dependerá de si el elemento en sí es un elemento de bloque o en línea.

• Se han eliminado los iconos de validación para elementos <select> con multiple.

• La clase .card-deck ha sido eliminada a favor de clases de cuadrícula.

• Los márgenes negativos se han deshabilitado de forma predeterminada.

• .embed-responsive-item elementos ahora se han eliminado a favor de aplicar el estilo a todos los hijos de ratios, que antes eran incrustaciones responsivas (más sobre eso en la siguiente sección).

Lo Nuevo

Finalmente, Bootstrap trae muchas adiciones emocionantes a su biblioteca en la versión 5. Algunas de estas modificaciones incluyen nuevas características, nuevos conceptos apoyados, nuevos componentes, nuevas clases de utilidad y más.

Tamaños de fuente responsivos ahora están habilitados por defecto

Tamaños de Fuente Responsivos (RFS) estaba en versiones anteriores de Bootstrap, pero estaba deshabilitado por defecto. Bootstrap 5 habilita RFS por defecto, haciendo que las fuentes en Bootstrap sean más responsivas. RFS es un proyecto lateral creado por Bootstrap para inicialmente escalar y redimensionar los tamaños de fuente de manera receptiva. Ahora, es capaz de hacer lo mismo para propiedades como margen, relleno, sombra de caja, y más.

Lo que hace es básicamente calcular los valores más adecuados en función de las dimensiones del navegador, y estas calculaciones se traducen a funciones calc cuando se compila. El uso de RFS también abandona el uso anterior de px para usar rem, ya que ayuda a lograr una mejor respuesta.

Si estás usando los archivos Sass para Bootstrap, ahora puedes usar mixins creados por RFS, incluyendo font-size, margin, padding, y más, que te permiten asegurarte de que tus componentes y estilos sean responsivos.

Soporte de derecha a izquierda

Bootstrap 5 incorpora soporte para diseños de derecha a izquierda (RTL) utilizando RTLCSS. Dado que Bootstrap se emplea en todo el mundo, es un paso importante y significativo ofrecer soporte RTL de forma predeterminada. Por ello, Bootstrap 5 ha eliminado la nomenclatura específica para direcciones (por ejemplo, el uso de izquierda y derecha) en favor de inicio y fin. Esto hace que Bootstrap sea lo suficientemente flexible para funcionar tanto en sitios web de izquierda a derecha (LTR) como de RTL. Por ejemplo, .dropleft ahora es .dropstart, .ml-* ahora es .ms-*, y más.

Para que Bootstrap reconozca y aplique estilos RTL en tu sitio web, debes establecer el dir de <html> en rtl, y agregar un atributo lang con el idioma RTL del sitio web. Por ejemplo, lang="ar".

Finalmente, necesitarás incluir el archivo CSS de RTL de Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Y con eso, tu sitio web tendrá soporte para RTL.

Nuevo punto de quiebre

Bootstrap 5 añade soporte para el nuevo punto de quiebre xxl que cubre dispositivos con una anchura igual o superior a 1400px. Anteriormente, el punto de quiebre más alto era xl, que cubría dispositivos con una anchura igual o superior a 1200px. Este cambio permite una mejor respuesta en dispositivos con pantallas más grandes, ya que el punto de quiebre xl no era suficiente.

Usar el nuevo breakpoint es similar a todos los demás breakpoints. Por ejemplo, para aplicar padding en dispositivos con ancho mayor o igual a 1400px, puedes hacerlo utilizando la clase .p-xxl-2.

Mejor documentación

Aunque esto no es parte de la biblioteca en sí, es bueno señalar la mejora en la documentación de Bootstrap. La documentación en Bootstrap 5 tiene una mejor organización del contenido, ya que los componentes que tienen detalles más extensos ahora tienen sus propias secciones. Por ejemplo, el componente Formulario en Bootstrap 4 era solo una página con todos los componentes amontonados dentro. En Bootstrap 5, la documentación del componente Formulario es una sección por sí misma, con subsecciones para diferentes subcomponentes, incluyendo Form Control, Select, Input Groups, y más.

Además, la navegación en la documentación es más fácil ahora a través del panel lateral, especialmente para pantallas más pequeñas. En Bootstrap 4, el panel de contenido no se podía ver en dispositivos más pequeños, lo que dificultaba encontrar la sección requerida en la página. En Bootstrap 5, el contenido del menú se ve en todos los tamaños de pantalla.

Además, en Bootstrap 5 puedes encontrar todas las variables Sass, mixins y funciones para cada componente en su página. Anteriormente, solo había una página de Temas que tenía algunos detalles sobre cómo cambiar las variables del tema en Bootstrap. Ahora, hay una sección de personalización por sí misma que tiene más detalles sobre cómo personalizar el tema de Bootstrap.

Nuevos componentes

Bootstrap 5 introduce algunos componentes nuevos en la biblioteca. Algunos de estos componentes formaban parte de otros y ahora son componentes independientes.

Acordeón

Anteriormente, el Acordeón era parte del componente Colapsable, en lugar de ser un componente propio. En Bootstrap 5, Acordeón es un nuevo componente. Con el Acordeón llega una nueva clase, .accordion, que contiene una lista de elementos de acordeón. Además, los Acordeones tienen un nuevo estilo en comparación con el estilo anterior en Bootstrap 4. Aquí hay un ejemplo del componente de acordeón:

Bootstrap 5 también agrega algunas clases para cambiar el estilo del Acordeón. Por ejemplo, .accordion-flush elimina parte del estilo predeterminado del Acordeón, como los colores de fondo o de borde. También puedes hacer que un elemento de acordeón siempre esté abierto eliminando el atributo data-bs-parent de su elemento .accordion-collapse.

Offcanvas

Otro nuevo componente es Offcanvas, que te permite crear una barra lateral superpuesta. Es la barra lateral que generalmente se usa en sitios web para mostrar el menú en dispositivos más pequeños. Puedes colocarlo en cualquier lado de la página utilizando .offcanvas-start para la izquierda en LTR, .offcanvas-top para la parte superior, .offcanvas-end para la derecha en LTR, y .offcanvas-bottom para la parte inferior. También puedes especificar si el Offcanvas debe tener un telón de fondo o no. Aquí hay un ejemplo de uso del componente Offcanvas:

Etiqueta Flotante

Etiqueta Flotante es una nueva parte componente del Form. Permite crear un input cuya etiqueta se ve como un placeholder al principio, luego cuando el input recibe foco la etiqueta flota hacia la parte superior del input por encima del valor. También funciona en elementos <select> y elementos <textarea>. Aquí hay un ejemplo de uso de etiquetas flotantes:

Otras adiciones

Además de los nuevos componentes, hay nuevas clases para componentes existentes, nuevas clases de utilidad, nuevas clases auxiliares y más. Aquí está la lista de todas las otras nuevas adiciones en Bootstrap 5:

• Se ha agregado la clase .row-cols-auto, que permite que las columnas tomen su ancho natural.

• A new utility class has been added to justify content called .justify-content-evenly.

• Anteriormente, los espacios entre columnas se lograban usando utilidades de espaciado. Ahora, puedes establecer el espacio entre columnas usando la nueva utilidad de diseño Gutter. Para establecer un espacio horizontal, usa .gx-*. Para establecer espacio vertical, usa .gy-*. Para establecer espacio tanto horizontal como verticalmente, usa .g-*.

• A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

• Las clases de utilidad de alineación vertical ahora se pueden utilizar con tablas.

• A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

• Ahora hay la opción de cambiar el divisor en Breadcrumb utilizando la variable CSS --bs-breadcrumb-divider.

  Aquí tienes un ejemplo de cómo cambiar el divisor a >>:

• Hay una nueva variante oscura para carruseles utilizando la clase .carousel-dark, y una nueva variante oscura para desplegables usando .dropdown-menu-dark.

• Hay una nueva opción de cierre automático en Dropdown que puede cambiar el comportamiento predeterminado de cierre del menú Dropdown. Por defecto, los menús desplegables se cierran al hacer clic fuera del desplegable o en uno de los elementos desplegables. Puedes cambiar eso estableciendo el atributo de datos data-bs-auto-close en inside, lo que hace que el desplegable se cierre al hacer clic en uno de los elementos desplegables pero no al hacer clic fuera. También puedes configurarlo en outside, lo que hará que el desplegable se cierre solo al hacer clic fuera del desplegable. Finalmente, puedes configurarlo en false para hacerlo cerrar solo cuando se vuelve a hacer clic en el botón del desplegable. Si estás inicializando el desplegable con JavaScript, puedes usar la opción autoClose en lugar del atributo de datos. Aquí hay un ejemplo de su uso:

• Ahora hay una mejor presentación de los inputs de archivo en los formularios.

• A new color input has been added, using the class .form-control-color.

• A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

• Se han agregado nuevos tonos y sombras de color en las variables de Sass.

• Hay dos nuevos tamaños de encabezado de visualización .display-5 y .display-6.

• Hay una nueva variante blanca para botones de cerrar .btn-close-white.

• Los desplegables ahora pueden tener .dropdown-items envueltos en elementos <li>.

• Los ítems en grupos de listas ahora pueden numerarse utilizando la nueva clase .list-group-numbered.

• Existen propiedades transition para los enlaces en el componente de paginación, lo que mejora su estilo.

• Se ha añadido una nueva clase .bg-body que establece el color de fondo del cuerpo en blanco.

• Se han añadido nuevas clases de utilidad de posición para establecer las propiedades top, left, right o bottom de un elemento. Por ejemplo, .top-0.

• Se han añadido las nuevas clases .translate-middle-x y .translate-middle-y para centrar fácilmente elementos absolutos horizontal y verticalmente respectivamente.

• Se han añadido nuevas clases utilitarias de ancho de borde .border-* que van desde 1 hasta 5.

• Hay una nueva utilidad de display .d-grid y una nueva utilidad de espacio .gap.

• Se han añadido nuevas utilidades de altura de línea .lh-1, .lh-sm, .lh-base y .lh-lg.

• Se han añadido nuevos ayudantes de proporción que reemplazan lo que anteriormente eran ayudantes de inserción receptiva. Los nombres de las clases se han renombrado reemplazando embed-responsive con ratio y by con x. Por ejemplo, lo que antes era .embed-responsive-16by9 ahora es .ratio-16x9.

• A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

• Existen utilidades .fs-* para tamaños de fuente, ya que RFS ahora está habilitado por defecto.

Conclusión

Bootstrap ha sido una de las bibliotecas CSS líderes durante la mayor parte de la última década. Permite a los desarrolladores construir fácilmente sitios web receptivos y ofrecer una buena experiencia de usuario. Con las adiciones y cambios de Bootstrap 5, este proceso será aún más fácil y permitirá mejorar los diseños de los sitios web y proporcionar una buena experiencia de usuario. Si estás usando Bootstrap 4 y estás pensando en migrar a Bootstrap 5, la migración es fácil y probablemente no necesites hacer muchos cambios.

Preguntas Frecuentes (FAQs) sobre Bootstrap 5