Ver en GitHub

Migración a v5

Rastrea y revisa los cambios en los archivos fuente, documentación y componentes de Bootstrap para ayudarte a migrar de v4 a v5.

On this page

v5.2.0

Diseño actualizado

Bootstrap v5.2.0 incluye una actualización sutil de diseño para un puñado de componentes y propiedades en todo el proyecto, más notablemente a través de valores refinados de border-radius en botones y controles de formulario. Nuestra documentación también se ha actualizado con una nueva página de inicio, un diseño de docs más simple que ya no colapsa secciones de la barra lateral, y ejemplos más prominentes de Bootstrap Icons.

Más variables CSS

Hemos actualizado todos nuestros componentes para usar variables CSS. Aunque Sass sigue siendo la base de todo, cada componente se ha actualizado para incluir variables CSS en las clases base del componente (p. ej., .btn), permitiendo más personalización en tiempo real de Bootstrap. En versiones posteriores, continuaremos expandiendo nuestro uso de variables CSS en nuestro layout, formularios, helpers y utilidades. Lee más sobre las variables CSS en cada componente en sus respectivas páginas de documentación.

Nuestro uso de variables CSS será algo incompleto hasta Bootstrap 6. Aunque nos encantaría implementarlas completamente en todas partes, corren el riesgo de causar cambios disruptivos. Por ejemplo, establecer $alert-border-width: var(--bs-border-width) en nuestro código fuente rompe el potencial Sass en tu propio código si estabas haciendo $alert-border-width * 2 por alguna razón.

Como tal, donde sea posible, continuaremos impulsando hacia más variables CSS, pero por favor ten en cuenta que nuestra implementación puede ser algo limitada en v5.

Nuevo `_maps.scss`

Bootstrap v5.2.0 introdujo un nuevo archivo Sass con _maps.scss. Extrae varios mapas de Sass de _variables.scss para solucionar un problema donde las actualizaciones a un mapa original no se aplicaban a los mapas secundarios que lo extienden. Por ejemplo, las actualizaciones a $theme-colors no se estaban aplicando a otros mapas de tema que dependían de $theme-colors, rompiendo flujos de trabajo clave de personalización. En resumen, Sass tiene una limitación donde una vez que una variable o mapa por defecto ha sido usado, no puede actualizarse. Hay una limitación similar con las variables CSS cuando se usan para componer otras variables CSS.

Por esto las personalizaciones de variables en Bootstrap tienen que ir después de @import "functions", pero antes de @import "variables" y del resto de nuestra pila de imports. Lo mismo aplica a los mapas de Sass—debes sobrescribir los valores por defecto antes de que se usen. Los siguientes mapas se han movido al nuevo _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Tus builds personalizados de CSS de Bootstrap ahora deberían verse algo así con un import de mapas separado.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Nuevas utilidades

Se expandieron las utilidades de font-weight para incluir .fw-semibold para fuentes semibold.
Se expandieron las utilidades de border-radius para incluir dos nuevos tamaños, .rounded-4 y .rounded-5, para más opciones.

Cambios adicionales

Se introdujo la nueva opción $enable-container-classes. — Ahora al optar por el diseño experimental de CSS Grid, las clases .container-* seguirán compilándose, a menos que esta opción se establezca en false. Los contenedores ahora también mantienen sus valores de canal.
El componente Offcanvas ahora tiene variaciones responsive. La clase original .offcanvas permanece sin cambios—oculta contenido en todos los viewports. Para hacerlo responsive, cambia esa clase .offcanvas por cualquier clase .offcanvas-{sm|md|lg|xl|xxl}.
Los divisores de tabla más gruesos ahora son opcionales. — Hemos eliminado el borde más grueso y más difícil de sobrescribir entre grupos de tablas y lo hemos movido a una clase opcional que puedes aplicar, .table-group-divider. Consulta la documentación de tablas para un ejemplo.
Scrollspy ha sido reescrito para usar la Intersection Observer API, lo que significa que ya no necesitas contenedores padres relativos, se deprecia la configuración de offset, y más. Busca que tus implementaciones de Scrollspy sean más precisas y consistentes en el resaltado de navegación.
Los popovers y tooltips ahora usan variables CSS. Algunas variables CSS se han actualizado desde sus contrapartes de Sass para reducir el número de variables. Como resultado, tres variables han sido deprecadas en esta versión: $popover-arrow-color, $popover-arrow-outer-color, y $tooltip-arrow-color.
Se añadieron los nuevos helpers .text-bg-{color}. En lugar de establecer utilidades individuales .text-* y .bg-*, ahora puedes usar los helpers .text-bg-* para establecer un background-color con un color de primer plano de contraste.
Se añadió el modificador .form-check-reverse para invertir el orden de las etiquetas y los checkboxes/radios asociados.
Se añadió soporte para columnas rayadas en tablas mediante la nueva clase .table-striped-columns.

Para una lista completa de cambios, consulta el proyecto v5.2.0 en GitHub.

v5.1.0

Se añadió soporte experimental para CSS Grid layout. — Esto es un trabajo en progreso, y aún no está listo para uso en producción, pero puedes optar por la nueva función vía Sass. Para habilitarlo, deshabilita el grid por defecto, estableciendo $enable-grid-classes: false y habilita el CSS Grid estableciendo $enable-cssgrid: true.
Se actualizaron los navbars para soportar offcanvas. — Añade drawers offcanvas en cualquier navbar con las clases responsive .navbar-expand-* y algo de markup de offcanvas.
Se añadió el nuevo componente placeholder. — Nuestro componente más nuevo, una forma de proporcionar bloques temporales en lugar de contenido real para ayudar a indicar que algo todavía se está cargando en tu sitio o app.
El plugin Collapse ahora soporta colapso horizontal. — Añade .collapse-horizontal a tu .collapse para colapsar el width en lugar del height. Evita el repintado del navegador estableciendo un min-height o height.
Se añadieron los nuevos helpers de stack y regla vertical. — Aplica rápidamente múltiples propiedades de flexbox para crear rápidamente layouts personalizados con stacks. Elige entre stacks horizontales (.hstack) y verticales (.vstack). Añade divisores verticales similares a los elementos <hr> con los nuevos helpers .vr.
Se añadieron nuevas variables CSS globales :root. — Se añadieron varias variables CSS nuevas a nivel :root para controlar los estilos de <body>. Hay más en camino, incluyendo a través de nuestras utilidades y componentes, pero por ahora lee sobre las variables CSS en la sección de Personalización.
Se revisaron las utilidades de color y fondo para usar variables CSS, y se añadieron nuevas utilidades de opacidad de texto y opacidad de fondo. — Las utilidades .text-* y .bg-* ahora se construyen con variables CSS y valores de color rgba(), permitiéndote personalizar fácilmente cualquier utilidad con las nuevas utilidades de opacidad.
Se añadieron nuevos ejemplos de snippets para mostrar cómo personalizar nuestros componentes. — Toma componentes personalizados listos para usar y otros patrones de diseño comunes con nuestros nuevos ejemplos de Snippets. Incluye footers, dropdowns, list groups, y modales.
Se eliminaron los estilos de posicionamiento no utilizados de popovers y tooltips ya que estos son manejados únicamente por Popper. $tooltip-margin ha sido deprecado y establecido en null en el proceso.

¿Quieres más información? Lee el post del blog de v5.1.0.

¡Hola! Los cambios de nuestra primera versión principal de Bootstrap 5, v5.0.0, están documentados a continuación. No reflejan los cambios adicionales mostrados anteriormente.

Dependencias

Se eliminó jQuery.
Se actualizó de Popper v1.x a Popper v2.x.
Se reemplazó Libsass con Dart Sass como nuestro compilador de Sass dado que Libsass fue deprecado.
Se migró de Jekyll a Hugo para construir nuestra documentación

Soporte de navegadores

Se eliminó el soporte para Internet Explorer 10 y 11
Se eliminó el soporte para Microsoft Edge < 16 (Legacy Edge)
Se eliminó el soporte para Firefox < 60
Se eliminó el soporte para Safari < 12
Se eliminó el soporte para iOS Safari < 12
Se eliminó el soporte para Chrome < 60

Cambios en la documentación

Se rediseñó la página principal, el layout de la documentación y el footer.
Se añadió una nueva guía de Parcel.
Se añadió una nueva sección de Personalización, reemplazando la página de Theming de v4, con nuevos detalles sobre Sass, opciones de configuración global, esquemas de color, variables CSS y más.
Se reorganizó toda la documentación de formularios en una nueva sección de Forms, dividiendo el contenido en páginas más enfocadas.
De manera similar, se actualizó la sección de Layout, para desarrollar el contenido del grid más claramente.
Se renombró la página del componente “Navs” a “Navs & Tabs”.
Se renombró la página “Checks” a “Checks & radios”.
Se rediseñó el navbar y se añadió un nuevo subnav para facilitar la navegación por nuestras versiones de sitios y documentación.
Se añadió un nuevo atajo de teclado para el campo de búsqueda: Ctrl + /.

Sass

Hemos eliminado las fusiones predeterminadas de Sass maps para facilitar la eliminación de valores redundantes. Ten en cuenta que ahora tienes que definir todos los valores en los Sass maps como $theme-colors. Revisa cómo manejar los Sass maps.
Disruptivo Se renombró la función color-yiq() y las variables relacionadas a color-contrast() ya que ya no está relacionada con el espacio de color YIQ. Ver #30168.
- $yiq-contrasted-threshold se renombró a $min-contrast-ratio.
- $yiq-text-dark y $yiq-text-light se renombraron respectivamente a $color-contrast-dark y $color-contrast-light.
Breaking Los parámetros de los mixins de media queries han cambiado para un enfoque más lógico.
- media-breakpoint-down() usa el breakpoint en sí mismo en lugar del siguiente breakpoint (ej., media-breakpoint-down(lg) en lugar de media-breakpoint-down(md) apunta a viewports más pequeños que lg).
- De manera similar, el segundo parámetro en media-breakpoint-between() también usa el breakpoint en sí mismo en lugar del siguiente breakpoint (ej., media-between(sm, lg) en lugar de media-breakpoint-between(sm, md) apunta a viewports entre sm y lg).
Breaking Se eliminaron los estilos de impresión y la variable $enable-print-styles. Las clases de display para impresión siguen disponibles. Ver #28339.
Breaking Se eliminaron las funciones color(), theme-color() y gray() en favor de variables. Ver #29083.
Breaking Se renombró la función theme-color-level() a color-level() y ahora acepta cualquier color que desees en lugar de solo los colores de $theme-color. Ver #29083 Cuidado: color-level() fue posteriormente eliminada en v5.0.0-alpha3.
Breaking Se renombraron $enable-prefers-reduced-motion-media-query y $enable-pointer-cursor-for-buttons a $enable-reduced-motion y $enable-button-pointers por brevedad.
Breaking Se eliminó el mixin bg-gradient-variant(). Usa la clase .bg-gradient para añadir gradientes a los elementos en lugar de las clases generadas .bg-gradient-*.
Breaking Removed previously deprecated mixins:
- hover, hover-focus, plain-hover-focus y hover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide() (también se eliminó la clase utilitaria asociada, .text-hide)
- visibility()
- form-control-focus()
Breaking Se renombró la función scale-color() a shift-color() para evitar colisión con la propia función de escalado de color de Sass.
Los mixins de box-shadow ahora permiten valores null y eliminan none de múltiples argumentos. Ver #30394.
El mixin border-radius() ahora tiene un valor predeterminado.

Sistema de colores

El sistema de colores que funcionaba con color-level() y $theme-color-interval se eliminó en favor de un nuevo sistema de colores. Todas las funciones lighten() y darken() en nuestro código base se reemplazaron por tint-color() y shade-color(). Estas funciones mezclarán el color con blanco o negro en lugar de cambiar su luminosidad en una cantidad fija. shift-color() teñirá o sombreará un color dependiendo de si su parámetro de peso es positivo o negativo. Ver #30622 para más detalles.
Se añadieron nuevos tintes y sombras para cada color, proporcionando nueve colores separados para cada color base, como nuevas variables de Sass.
Mejor contraste de color. Se aumentó la relación de contraste de color de 3:1 a 4.5:1 y se actualizaron los colores azul, verde, cian y rosa para garantizar el contraste WCAG 2.1 AA. También se cambió nuestro color de contraste de $gray-900 a $black.
Para soportar nuestro sistema de colores, hemos añadido nuevas funciones personalizadas tint-color() y shade-color() para mezclar nuestros colores adecuadamente.

Actualizaciones del grid

¡Nuevo breakpoint! Se añadió el nuevo breakpoint xxl para 1400px y superior. Sin cambios en los demás breakpoints.
Gutters mejorados. Los gutters ahora se establecen en rems, y son más estrechos que en v4 (1.5rem, o aproximadamente 24px, frente a los 30px anteriores). Esto alinea los gutters de nuestro sistema de grid con nuestras utilidades de espaciado.
- Se añadió una nueva clase de gutter (.g-*, .gx-* y .gy-*) para controlar gutters horizontales/verticales, gutters horizontales y gutters verticales.
- Breaking Se renombró .no-gutters a .g-0 para coincidir con las nuevas utilidades de gutter.
Las columnas ya no tienen position: relative aplicado, por lo que puede que tengas que añadir .position-relative a algunos elementos para restaurar ese comportamiento.
Breaking Se eliminaron varias clases .order-* que solían no usarse. Ahora solo proporcionamos .order-1 a .order-5 por defecto.
Breaking Se eliminó el componente .media ya que puede replicarse fácilmente con utilidades. Ver #28265 y la página de utilidades flex para un ejemplo.
Breaking bootstrap-grid.css ahora solo aplica box-sizing: border-box a la columna en lugar de resetear el box-sizing global. De esta manera, nuestros estilos de grid pueden usarse en más lugares sin interferencias.
$enable-grid-classes ya no deshabilita la generación de clases de contenedor. Ver #29146.
Se actualizó el mixin make-col para que por defecto genere columnas iguales sin un tamaño especificado.

Contenido, Reboot, etc

RFS ahora está habilitado por defecto. Los encabezados que usan el mixin font-size() ajustarán automáticamente su font-size para escalar con el viewport. Esta función antes era opcional en v4.
Breaking Se revisó por completo nuestra tipografía de display para reemplazar nuestras variables $display-* con un Sass map $display-font-sizes. También se eliminaron las variables individuales $display-*-weight por una sola $display-font-weight y se ajustaron los font-size.
Se añadieron dos nuevos tamaños de encabezado .display-*, .display-5 y .display-6.
Los enlaces están subrayados por defecto (no solo en hover), a menos que sean parte de componentes específicos.
Se rediseñaron las tablas para refrescar sus estilos y reconstruirlas con variables CSS para mayor control sobre el estilo.
Breaking Las tablas anidadas ya no heredan estilos.
Breaking Se eliminaron .thead-light y .thead-dark en favor de las clases de variantes .table-* que pueden usarse para todos los elementos de la tabla (thead, tbody, tfoot, tr, th y td).
Breaking El mixin table-row-variant() se renombró a table-variant() y acepta solo 2 parámetros: $color (nombre del color) y $value (código de color). El color del borde y los colores de acento se calculan automáticamente basándose en las variables factor de la tabla.
Se dividieron las variables de padding de celdas de tabla en -y y -x.
Breaking Se eliminó la clase .pre-scrollable. Ver #29135
Breaking Las utilidades .text-* ya no añaden estados hover y focus a los enlaces. Las clases helper .link-* pueden usarse en su lugar. Ver #29267
Breaking Se eliminó la clase .text-justify. Ver #29793
Disruptivo Los elementos <hr> ahora usan height en lugar de border para soportar mejor el atributo size. Esto también habilita el uso de utilidades de padding para crear divisores más gruesos (p. ej., <hr class="py-1">).
Se reseteó el padding-left horizontal predeterminado en los elementos <ul> y <ol> del valor predeterminado del navegador de 40px a 2rem.
Se añadió $enable-smooth-scroll, que aplica scroll-behavior: smooth globalmente, excepto para los usuarios que solicitan movimiento reducido a través de la media query prefers-reduced-motion. Ver #31877

RTL

Las variables, utilidades y mixins específicos de dirección horizontal se han renombrado para usar propiedades lógicas como las que se encuentran en los layouts de flexbox, ej., start y end en lugar de left y right.

Formularios

¡Se añadieron nuevos formularios flotantes! Hemos promovido el ejemplo de Floating labels a componentes de formulario totalmente soportados. Ver la nueva página de Floating labels.
Breaking Se consolidaron los elementos de formulario nativos y personalizados. Checkboxes, radios, selects y otros inputs que tenían clases nativas y personalizadas en v4 se han consolidado. Ahora casi todos nuestros elementos de formulario son completamente personalizados, la mayoría sin necesidad de HTML personalizado.
- .custom-control.custom-checkbox ahora es .form-check.
- .custom-control.custom-custom-radio ahora es .form-check.
- .custom-control.custom-switch ahora es .form-check.form-switch.
- .custom-select ahora es .form-select.
- .custom-file y .form-file se reemplazaron por estilos personalizados sobre .form-control.
- .custom-range ahora es .form-range.
- Se eliminaron .form-control-file y .form-control-range nativos.
Breaking Se eliminaron .input-group-append y .input-group-prepend. Ahora puedes simplemente añadir botones y .input-group-text como hijos directos de los input groups.
El antiguo bug de radio de borde faltante en input group con feedback de validación finalmente se solucionó añadiendo una clase adicional .has-validation a los input groups con validación.
Breaking Se eliminaron las clases de layout específicas de formularios para nuestro sistema de grid. Usa nuestro grid y utilidades en lugar de .form-group, .form-row o .form-inline.
Breaking Las etiquetas de formulario ahora requieren .form-label.
Breaking .form-text ya no establece display, permitiéndote crear texto de ayuda inline o en bloque como desees simplemente cambiando el elemento HTML.
Los controles de formulario ya no usan height fijo cuando es posible, en su lugar deferiendo a min-height para mejorar la personalización y compatibilidad con otros componentes.
Los iconos de validación ya no se aplican a los <select> con multiple.
Se reorganizaron los archivos fuente de Sass bajo scss/forms/, incluyendo los estilos de input group.

Componentes

Se unificaron los valores de padding para alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers y tooltips para que se basen en nuestra variable $spacer. Ver #30564.

Acordeón

Se añadió un nuevo componente accordion.

Alertas

Las alerts ahora tienen ejemplos con iconos.
Se eliminaron los estilos personalizados para <hr> en cada alert ya que ahora usan currentColor.

Badges

Breaking Se eliminaron todas las clases de color .badge-* en favor de utilidades de fondo (ej., usa .bg-primary en lugar de .badge-primary).
Breaking Se eliminó .badge-pill: usa la utilidad .rounded-pill en su lugar.
Breaking Se eliminaron los estilos hover y focus para los elementos <a> y <button>.
Se aumentó el padding predeterminado de los badges de .25em/.5em a .35em/.65em.

Breadcrumbs

Se simplificó la apariencia predeterminada de los breadcrumbs eliminando padding, background-color y border-radius.
Se añadió la nueva propiedad personalizada CSS --bs-breadcrumb-divider para una personalización fácil sin necesidad de recompilar CSS.

Botones

Breaking Toggle buttons, con checkboxes o radios, ya no requieren JavaScript y tienen nuevo markup. Ya no requerimos un elemento contenedor, añade .btn-check al <input> y acompáñalo con cualquier clase .btn en el <label>. Ver #30650. La documentación de esto se ha movido de nuestra página de Buttons a la nueva sección de Forms.
Breaking Se eliminó .btn-block en favor de utilidades. En lugar de usar .btn-block en el .btn, envuelve tus botones con .d-grid y una utilidad .gap-* para espaciarlos según sea necesario. Cambia a clases responsivas para aún más control sobre ellos. Lee la documentación para algunos ejemplos.
Se actualizaron nuestros mixins button-variant() y button-outline-variant() para soportar parámetros adicionales.
Se actualizaron los botones para garantizar un mayor contraste en los estados hover y active.
Los botones deshabilitados ahora tienen pointer-events: none;.

Card

Breaking Se eliminó .card-deck en favor de nuestro grid. Envuelve tus cards en clases de columna y añade un contenedor .row-cols-* padre para recrear card decks (pero con más control sobre la alineación responsiva).
Breaking Se eliminó .card-columns en favor de Masonry. Ver #28922.
Breaking Se reemplazó el accordion basado en .card con un nuevo componente Accordion.

Carousel

Se añadió una nueva .carousel-dark variante para texto, controles e indicadores oscuros (ideal para fondos más claros).
Se reemplazaron los iconos de chevron para los controles del carousel con nuevos SVGs de Bootstrap Icons.

Botón de cierre

Breaking Se renombró .close a .btn-close por un nombre menos genérico.
Los close buttons ahora usan una background-image (SVG incrustado) en lugar de un × en el HTML, lo que permite una personalización más fácil sin necesidad de tocar tu markup.
Se añadió la nueva variante .btn-close-white que usa filter: invert(1) para habilitar iconos de cierre con mayor contraste sobre fondos más oscuros.

Collapse

Se eliminó el anclaje de scroll para los acordeones.

Dropdowns

Se añadió la nueva variante .dropdown-menu-dark y las variables asociadas para dropdowns oscuros bajo demanda.
Se añadió una nueva variable para $dropdown-padding-x.
Se oscureció el divisor del dropdown para mejorar el contraste.
Breaking Todos los eventos del dropdown ahora se disparan en el botón de alternar del dropdown y luego se propagan al elemento padre.
Los menús desplegables ahora tienen un atributo data-bs-popper="static" establecido cuando el posicionamiento del dropdown es estático, o el dropdown está en el navbar. Esto es añadido por nuestro JavaScript y nos ayuda a usar estilos de posicionamiento personalizados sin interferir con el posicionamiento de Popper.
Breaking Se eliminó la opción flip del plugin de dropdown en favor de la configuración nativa de Popper. Ahora puedes deshabilitar el comportamiento de flip pasando un array vacío para la opción fallbackPlacements en el modificador flip.
Los menús dropdown ahora pueden ser clicables con una nueva opción autoClose para manejar el comportamiento de cierre automático. Puedes usar esta opción para aceptar el click dentro o fuera del menú dropdown para hacerlo interactivo.
Los dropdowns ahora soportan .dropdown-items envueltos en <li>s.

Jumbotron

Breaking Se eliminó el componente jumbotron ya que puede replicarse con utilidades. Ver nuestro nuevo ejemplo de Jumbotron para una demo.

Grupo de lista

Se añadió un nuevo modificador .list-group-numbered a los list groups.

Navs y tabs

Se añadieron nuevas variables null para font-size, font-weight, color y color de :hover color a la clase .nav-link.

Navbars

Breaking Los navbars ahora requieren un contenedor interno (para simplificar drásticamente los requisitos de espaciado y CSS necesarios).
Disruptivo La clase .active ya no se puede aplicar a los .nav-items, debe aplicarse directamente en los .nav-links.

Offcanvas

Se añadió el nuevo componente offcanvas.

Paginación

Los enlaces de pagination ahora tienen margin-left personalizable que se redondea dinámicamente en todas las esquinas cuando están separados entre sí.
Se añadieron transitiones a los enlaces de pagination.

Popovers

Breaking Se renombró .arrow a .popover-arrow en nuestra plantilla predeterminada de popover.
Se renombró la opción whiteList a allowList.

Spinners

Los spinners ahora respetan prefers-reduced-motion: reduce ralentizando las animaciones. Ver #31882.
Se mejoró la alineación vertical de los spinners.

Toasts

Los toasts ahora pueden ser posicionados en un .toast-container con la ayuda de utilidades de posicionamiento.
Se cambió la duración predeterminada de los toasts a 5 segundos.
Se eliminó overflow: hidden de los toasts y se reemplazó con border-radius adecuados con funciones calc().

Tooltips

Breaking Se renombró .arrow a .tooltip-arrow en nuestra plantilla predeterminada de tooltip.
Breaking El valor predeterminado de fallbackPlacements se cambió a ['top', 'right', 'bottom', 'left'] para mejor posicionamiento de los elementos popper.
Breaking Se renombró la opción whiteList a allowList.

Utilidades

Breaking Se renombraron varias utilidades para usar nombres de propiedades lógicas en lugar de nombres direccionales con la adición de soporte RTL:
- Se renombró .left-* y .right-* a .start-* y .end-*.
- Se renombró .float-left y .float-right a .float-start y .float-end.
- Se renombró .border-left y .border-right a .border-start y .border-end.
- Se renombró .rounded-left y .rounded-right a .rounded-start y .rounded-end.
- Se renombró .ml-* y .mr-* a .ms-* y .me-*.
- Se renombró .pl-* y .pr-* a .ps-* y .pe-*.
- Se renombró .text-left y .text-right a .text-start y .text-end.
Breaking Se deshabilitaron los márgenes negativos por defecto.
Se añadió la nueva clase .bg-body para establecer rápidamente el fondo del <body> en elementos adicionales.
Se añadieron nuevas utilidades de position para top, right, bottom y left. Los valores incluyen 0, 50% y 100% para cada propiedad.
Se añadieron las nuevas utilidades .translate-middle-x y .translate-middle-y para centrar horizontal o verticalmente elementos con posicionamiento absoluto/fijo.
Se añadieron nuevas utilidades de border-width.
Breaking Se renombró .text-monospace a .font-monospace.
Breaking Se eliminó .text-hide ya que es un método anticuado para ocultar texto que no debería usarse más.
Se añadieron utilidades .fs-* para utilidades de font-size (con RFS habilitado). Estas usan la misma escala que los encabezados predeterminados de HTML (1-6, grande a pequeño), y pueden modificarse vía Sass map.
Breaking Se renombraron las utilidades .font-weight-* como .fw-* por brevedad y consistencia.
Breaking Se renombraron las utilidades .font-style-* como .fst-* por brevedad y consistencia.
Se añadió .d-grid a las utilidades de display y nuevas utilidades de gap (.gap) para layouts de CSS Grid y flexbox.
Breaking Se eliminaron .rounded-sm y rounded-lg, y se introdujo una nueva escala de clases, .rounded-0 a .rounded-3. Ver #31687.
Se añadieron nuevas utilidades de line-height: .lh-1, .lh-sm, .lh-base y .lh-lg. Ver aquí.
Se movió la utilidad .d-none en nuestro CSS para darle más peso sobre otras utilidades de display.
Se extendió el helper .visually-hidden-focusable para que también funcione en contenedores, usando :focus-within.

Helpers

Breaking Los helpers de embed responsivo se han renombrado a helpers de ratio con nuevos nombres de clase y comportamientos mejorados, así como una útil variable CSS.
- Las clases se han renombrado cambiando by por x en el aspect ratio. Por ejemplo, .ratio-16by9 ahora es .ratio-16x9.
- Hemos eliminado .embed-responsive-item y el selector de grupo de elementos en favor de un selector más simple .ratio > *. Ya no se necesita ninguna clase, y el helper de ratio ahora funciona con cualquier elemento HTML.
- El Sass map $embed-responsive-aspect-ratios se ha renombrado a $aspect-ratios y sus valores se han simplificado para incluir el nombre de clase y el porcentaje como el par key: value.
- Las variables CSS ahora se generan e incluyen para cada valor en el Sass map. Modifica la variable --bs-aspect-ratio en el .ratio para crear cualquier aspect ratio personalizado.
Breaking “Screen reader” classes are now clases “visualmente ocultas”.
- Se cambió el archivo Sass de scss/helpers/_screenreaders.scss a scss/helpers/_visually-hidden.scss
- Se renombró .sr-only y .sr-only-focusable a .visually-hidden y .visually-hidden-focusable
- Se renombraron los mixins sr-only() y sr-only-focusable() a visually-hidden() y visually-hidden-focusable().
bootstrap-utilities.css ahora también incluye nuestros helpers. Los helpers ya no necesitan importarse en builds personalizados.

JavaScript

Se eliminó la dependencia de jQuery y se reescribieron los plugins en JavaScript normal.
Breaking Los atributos data de todos los plugins de JavaScript ahora tienen un namespace para ayudar a distinguir la funcionalidad de Bootstrap de terceros y de tu propio código. Por ejemplo, usamos data-bs-toggle en lugar de data-toggle.
Todos los plugins ahora pueden aceptar un selector CSS como primer argumento. Puedes pasar un elemento DOM o cualquier selector CSS válido para crear una nueva instancia del plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfig puede pasarse como una función que acepta la configuración Popper predeterminada de Bootstrap como argumento, para que puedas fusionar esta configuración predeterminada a tu manera. Aplica a dropdowns, popovers y tooltips.
El valor predeterminado de fallbackPlacements se cambió a ['top', 'right', 'bottom', 'left'] para mejor posicionamiento de los elementos Popper. Aplica a dropdowns, popovers y tooltips.
Se eliminó el guión bajo de los métodos estáticos públicos como _getInstance() → getInstance().