Migrando a v5

Rastrexa e revisa os cambios nos ficheiros fonte, a documentación e os compoñentes de Bootstrap para axudarche a migrar da versión 4 á versión 5.

Nesta páxina

v5.2.0

Deseño renovado

Bootstrap v5.2.0 presenta unha actualización de deseño sutil para un puñado de compoñentes e propiedades en todo o proxecto, sobre todo a través de valores refinadosborder-radius en botóns e controis de formulario . A nosa documentación tamén se actualizou cunha nova páxina de inicio, un deseño de documentos máis sinxelo que xa non contrae seccións da barra lateral e exemplos máis destacados de iconas de arranque .

Máis variables CSS

Actualizamos todos os nosos compoñentes para usar variables CSS. Aínda que Sass aínda o sustenta todo, cada compoñente actualizouse para incluír variables CSS nas clases base de compoñentes (por exemplo, .btn), permitindo unha personalización máis en tempo real de Bootstrap. En versións posteriores, seguiremos ampliando o noso uso de variables CSS no noso deseño, formularios, axudantes e utilidades. Lea máis sobre as variables CSS en cada compoñente nas súas respectivas páxinas de documentación.

O noso uso de variables CSS estará algo incompleto ata o Bootstrap 6. Aínda que nos encantaría implementar completamente estes en todos os ámbitos, corren o risco de provocar cambios rotundos. Por exemplo, configurar $alert-border-width: var(--bs-border-width)o noso código fonte rompe o potencial Sass no teu propio código se o fixeches $alert-border-width * 2por algún motivo.

Como tal, sempre que sexa posible, seguiremos impulsando máis variables CSS, pero recoñece que a nosa implementación pode estar lixeiramente limitada na versión 5.

Novo`_maps.scss`

Bootstrap v5.2.0 introduciu un novo ficheiro Sass con _maps.scss. Saca varios mapas de Sass _variables.scsspara solucionar un problema no que non se aplicaban actualizacións dun mapa orixinal aos mapas secundarios que os estenden. Por exemplo, as actualizacións de $theme-colorsnon se estaban aplicando a outros mapas temáticos que dependían de $theme-colors, interrompendo os fluxos de traballo de personalización clave. En resumo, Sass ten unha limitación na que unha vez que se utilizou unha variable ou un mapa predeterminados , non se pode actualizar. Hai unha deficiencia similar coas variables CSS cando se usan para compoñer outras variables CSS.

É por iso que as personalizacións variables en Bootstrap teñen que vir despois @import "functions", pero antes @import "variables"e o resto da nosa pila de importación. O mesmo aplícase aos mapas Sass: debes anular os valores predeterminados antes de que se utilicen. Os seguintes mapas foron movidos ao novo _maps.scss:

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

As túas compilacións CSS de Bootstrap personalizadas agora deberían verse así cunha importación de mapas separada.

  // 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

Novas utilidades

font-weightUtilidades ampliadas para incluír .fw-semiboldfontes en seminegriña.
border-radiusUtilidades ampliadas para incluír dous novos tamaños .rounded-4e .rounded-5, para máis opcións.

Cambios adicionais

Introduciuse unha nova $enable-container-classesopción. — Agora, ao optar polo deseño experimental da cuadrícula CSS, .container-*as clases aínda se compilarán, a non ser que esta opción estea definida como false. Os contedores tamén manteñen agora os seus valores de cuneta.
O compoñente Offcanvas agora ten variacións de resposta . A clase orixinal .offcanvaspermanece sen cambios: oculta o contido en todas as vistas. Para que sexa responsive, cambia esa .offcanvasclase a calquera .offcanvas-{sm|md|lg|xl|xxl}clase.
Os divisores de mesa máis grosos agora están activados. — Eliminamos o bordo máis groso e máis difícil de anular entre os grupos de táboas e movémolo a unha clase opcional que podes aplicar, .table-group-divider. Consulte a documentación da táboa para obter un exemplo.
Scrollspy foi reescrito para usar a API de Intersection Observer , o que significa que xa non necesitas envoltorios parentais relativos,offsetconfiguración obsoleta e moito máis. Busca que as túas implementacións de Scrollspy sexan máis precisas e coherentes no seu resaltado de navegación.
Os popovers e as informacións sobre ferramentas agora usan variables CSS. Algunhas variables CSS actualizáronse das súas contrapartes de Sass para reducir o número de variables. Como resultado, tres variables quedaron en desuso nesta versión: $popover-arrow-color, $popover-arrow-outer-color, e $tooltip-arrow-color.
Engadíronse novos .text-bg-{color}axudantes. En lugar de configurar individual .text-*e .bg-*utilidades, agora podes usar os .text-bg-*axudantes para establecer un background-colorprimeiro plano contrastante color.
Engadiuse .form-check-reverseun modificador para cambiar a orde das etiquetas e as caixas de verificación/radios asociadas.
Engadiuse compatibilidade de columnas con franxas ás táboas a través da nova .table-striped-columnsclase.

Para obter unha lista completa de cambios, consulte o proxecto v5.2.0 en GitHub .

v5.1.0

Engadido soporte experimental para o deseño de cuadrícula CSS . — Este é un traballo en curso e aínda non está listo para o seu uso en produción, pero podes optar pola nova función a través de Sass. Para activalo, desactive a grade predeterminada configurando $enable-grid-classes: falsee habilite a grade CSS configurando $enable-cssgrid: true.
Barras de navegación actualizadas para admitir offcanvas. — Engade caixóns fóra do lenzo en calquera barra de navegación coas .navbar-expand-*clases responsive e algún marcado fóra do lenzo.
Engadiuse un novo compoñente de marcador de posición . — O noso compoñente máis recente, unha forma de proporcionar bloqueos temporais en lugar de contido real para axudar a indicar que aínda se está cargando algo no teu sitio ou aplicación.
O complemento de contraer agora admite o colapso horizontal . — Engade .collapse-horizontalao teu .collapsepara contraer widtho height. Evite repintar o navegador configurando un min-heightou height.
Engadíronse novos axudantes de pila e regras verticais. — Aplique rapidamente varias propiedades de flexbox para crear rapidamente deseños personalizados con pilas . Escolle entre pilas horizontais ( .hstack) e verticais ( ). .vstackEngade divisores verticais semellantes aos <hr>elementos cos novos .vraxudantes .
Engadíronse novas :rootvariables CSS globais. — Engadíronse varias variables CSS novas ao :rootnivel para controlar <body>estilos. Hai máis traballos, incluíndo as nosas utilidades e compoñentes, pero polo momento le as variables CSS na sección Personalizar .
Revisáronse as utilidades de cor e de fondo para usar variables CSS, e engadiu novas utilidades de opacidade de texto e de fondo . — .text-* e .bg-*as utilidades agora están construídas con variables CSS e rgba()valores de cor, o que lle permite personalizar facilmente calquera utilidade con novas utilidades de opacidade.
Engadíronse novos exemplos de fragmentos baseados para mostrar como personalizar os nosos compoñentes. — Prepara para usar compoñentes personalizados e outros patróns de deseño comúns cos nosos novos exemplos de fragmentos . Inclúe pés de páxina , menús despregables , grupos de listas e modais .
Elimináronse os estilos de posicionamento non utilizados dos popovers e das suxestións de ferramentas , xa que só os xestiona Popper. $tooltip-marginquedou en desuso e definiuse como nulldurante o proceso.

Queres máis información? Le a publicación do blog v5.1.0.

Boas! Os cambios na nosa primeira versión importante de Bootstrap 5, v5.0.0, están documentados a continuación. Non reflicten os cambios adicionais mostrados anteriormente.

Dependencias

Descartou jQuery.
Actualizouse de Popper v1.x a Popper v2.x.
Substituíuse Libsass por Dart Sass xa que o noso compilador Sass dado Libsass quedou en desuso.
Migramos de Jekyll a Hugo para construír a nosa documentación

Soporte de navegador

Abandonou Internet Explorer 10 e 11
Microsoft Edge caído < 16 (Legacy Edge)
Descartou Firefox < 60
Safari abandonado < 12
Safari de iOS < 12 caído
Chrome abandonado < 60

Cambios na documentación

Páxina de inicio, deseño de documentos e pé de páxina redeseñados.
Engadida unha nova guía de paquetería .
Engadiuse unha nova sección Personalizar , que substitúe a páxina Temática da v4 , con novos detalles sobre Sass, opcións de configuración globais, esquemas de cores, variables CSS e moito máis.
Reorganizou toda a documentación do formulario nunha nova sección de Formularios , dividindo o contido en páxinas máis centradas.
Do mesmo xeito, actualizouse a sección Disposición , para concretar o contido da grella con máis claridade.
Cambiou o nome da páxina do compoñente "Navs" a "Navs & Tabs".
Cambiou o nome da páxina "Cheques" a "Cheques e radios".
Redeseñamos a barra de navegación e engadiu un novo subnav para facilitar a navegación polos nosos sitios e versións de documentos.
Engadiuse un novo atallo de teclado para o campo de busca: Ctrl + /.

Sass

Eliminamos as combinacións de mapas Sass predeterminadas para facilitar a eliminación de valores redundantes. Ten en conta que agora tes que definir todos os valores nos mapas de Sass como $theme-colors. Consulte como tratar cos mapas Sass .
RomperCambiouse o nome da color-yiq()función e das variables relacionadas a color-contrast()que xa non está relacionada co espazo de cor YIQ. Ver #30168.
- $yiq-contrasted-thresholdé renomeado como $min-contrast-ratio.
- $yiq-text-darke $yiq-text-lightson renomeados respectivamente a $color-contrast-darke $color-contrast-light.
RomperOs parámetros dos mixins de consulta de medios cambiaron para un enfoque máis lóxico.
- media-breakpoint-down()usa o propio punto de interrupción en lugar do seguinte punto de interrupción (p. ex., media-breakpoint-down(lg)en lugar de media-breakpoint-down(md)apuntar ventanas gráficas máis pequenas que lg).
- Do mesmo xeito, o segundo parámetro en media-breakpoint-between()tamén usa o propio punto de interrupción en lugar do seguinte punto de interrupción (p. ex., media-between(sm, lg)en lugar das media-breakpoint-between(sm, md)vistas de destino entre sme lg).
RomperElimináronse os estilos de impresión e $enable-print-stylesas variables. As clases de exhibición impresa aínda están por aquí. Ver #28339 .
RomperDeixáronse caer color(), theme-color(), e gray()funcións a favor de variables. Ver #29083 .
Rompertheme-color-level()A función renomeada a color-level()e agora acepta calquera cor que desexe en lugar de só $theme-colorcores. Ver #29083 Coidado: color-level() máis tarde deixouse caer en v5.0.0-alpha3.
RomperRenomeado $enable-prefers-reduced-motion-media-querye $enable-pointer-cursor-for-buttonspara $enable-reduced-motione $enable-button-pointerspor brevidade.
RomperQuitouse a bg-gradient-variant()mestura. Use a .bg-gradientclase para engadir degradados aos elementos en lugar das .bg-gradient-*clases xeradas.
Romper Elimináronse mixins obsoletos anteriormente:
- hover, hover-focus, plain-hover-focusehover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(tamén descartou a clase de utilidade asociada, .text-hide)
- visibility()
- form-control-focus()
Romperscale-color()Función renomeada a shift-color()para evitar colisións coa función de escala de cores de Sass.
box-shadowOs mixins agora permiten nullvalores e eliminan nonevarios argumentos. Ver #30394 .
O border-radius()mixin agora ten un valor predeterminado.

Sistema de cor

O sistema de cores que funcionou color-level()e $theme-color-intervalfoi eliminado a favor dun novo sistema de cores. Todas lighten()e as darken()funcións da nosa base de código substitúense por tint-color()e shade-color(). Estas funcións mesturarán a cor con branco ou negro en lugar de cambiar a súa luminosidade nunha cantidade fixa. O shift-color()matizará ou matizará unha cor dependendo de se o seu parámetro de peso é positivo ou negativo. Consulte #30622 para obter máis detalles.
Engadíronse novos tons e matices para cada cor, proporcionando nove cores separadas para cada cor base, como novas variables de Sass.
Contraste de cores mellorado. Relación de contraste de cor aumentada de 3:1 a 4,5:1 e cores azul, verde, cian e rosa actualizadas para garantir o contraste WCAG 2.1 AA. Tamén cambiou a nosa cor de contraste de cor de $gray-900a $black.
Para admitir o noso sistema de cores, engadimos novas funcións tint-color()e personalizados shade-color()para mesturar as nosas cores de forma adecuada.

Actualizacións da grella

Novo punto de interrupción! Engadiuse un novo xxlpunto de interrupción para 1400pxe superior. Non hai cambios en todos os demais puntos de interrupción.
Canaletas melloradas. Agora as cunetas están configuradas en rems e son máis estreitas que v4 ( 1.5rem, ou aproximadamente 24px, a partir de 30px). Isto aliña as cunetas do noso sistema de rede coas nosas utilidades de espazamento.
- Engadiuse unha nova clase de canalóns ( .g-*, .gx-*, e .gy-*) para controlar canlóns horizontais/verticais, canalóns horizontais e canlóns verticais.
- RomperCambiouse o nome .no-gutterspara .g-0que coincida coas novas utilidades de canalón.
As columnas xa non se position: relativeaplicaron, polo que é posible que teñas que engadir .position-relativealgúns elementos para restaurar ese comportamento.
RomperAbandonou varias .order-*clases que moitas veces non se usaban. Agora só ofrecemos .order-1para .order-5fóra da caixa.
RomperBaixou o .mediacompoñente xa que se pode replicar facilmente con utilidades. Vexa #28265 e a páxina de utilidades flexibles para ver un exemplo .
Romper bootstrap-grid.cssagora só se aplica box-sizing: border-boxá columna en lugar de restablecer o tamaño global da caixa. Deste xeito, os nosos estilos de grade pódense usar en máis lugares sen interferencias.
$enable-grid-classesxa non desactiva a xeración de clases de contedores. Ver #29146.
Actualizouse o make-colmixin por defecto para columnas iguais sen un tamaño especificado.

Contido, reinicio, etc

RFS agora está activado por defecto. Os títulos que usan ofont-size()mixin axustaranse automaticamentefont-sizea escala coa ventana gráfica. Esta función estaba activada anteriormente coa versión 4.
RomperRevisamos a nosa tipografía de visualización para substituír as nosas $display-*variables e cun $display-font-sizesmapa Sass. Tamén se eliminaron as $display-*-weightvariables individuais para un s único $display-font-weighte axustado font-size.
Engadíronse dous novos .display-*tamaños de título .display-5e .display-6.
As ligazóns están subliñadas por defecto (non só ao pasar o cursor), a non ser que formen parte de compoñentes específicos.
As táboas redeseñadas para actualizar os seus estilos e reconstruílas con variables CSS para obter máis control sobre o estilo.
RomperAs táboas aniñadas xa non herdan estilos.
Romper .thead-lighte .thead-darkquítanse a favor das .table-*clases variantes que se poden usar para todos os elementos da táboa ( thead, tbody, tfoot, tre ) th.td
RomperO table-row-variant()mixin é renomeado table-variant()e só acepta 2 parámetros: $color(nome da cor) e $value(código de cor). A cor do bordo e as cores de acento calcúlanse automaticamente en función das variables do factor da táboa.
Divide as variables de recheo de celas da táboa en -ye -x.
Romper.pre-scrollableClase abandonada . Ver #29135
Romper .text-*as utilidades xa non engaden estados de hover e foco ás ligazóns. .link-*no seu lugar pódense usar clases auxiliares. Ver #29267
Romper.text-justifyClase abandonada . Ver #29793
Romper <hr>agora úsanse elementos heighten lugar de borderpara apoiar mellor o sizeatributo. Isto tamén permite o uso de utilidades de recheo para crear divisores máis grosos (por exemplo, <hr class="py-1">).
padding-leftRestablece a horizontal predeterminada <ul>e os <ol>elementos do navegador 40pxa 2rem.
Engadida $enable-smooth-scroll, que se aplica scroll-behavior: smootha nivel global, excepto para os usuarios que solicitan movemento reducido mediante prefers-reduced-motionconsultas multimedia. Ver #31877

RTL

As variables, as utilidades e as mesturas específicas de dirección horizontal foron renomeadas para usar propiedades lóxicas como as que se atopan nos deseños de caixas flexibles, por exemplo, starte enden lugar de lefte right.

Formularios

Engadíronse novos formularios flotantes! Promovemos o exemplo de etiquetas flotantes para que os compoñentes de formulario sexan totalmente compatibles. Consulta a nova páxina de etiquetas flotantes.
Romper Elementos de formulario nativos e personalizados consolidados. Consolidáronse as caixas de verificación, as radios, as seleccións e outras entradas que tiñan clases nativas e personalizadas na versión 4. Agora case todos os nosos elementos de formulario son totalmente personalizados, a maioría sen necesidade de HTML personalizado.
- .custom-control.custom-checkboxé agora .form-check.
- .custom-control.custom-custom-radioé agora .form-check.
- .custom-control.custom-switché agora .form-check.form-switch.
- .custom-selecté agora .form-select.
- .custom-filee .form-fileforon substituídos por estilos personalizados enriba de .form-control.
- .custom-rangeé agora .form-range.
- Caído nativo .form-control-filee .form-control-range.
RomperCaído .input-group-appende .input-group-prepend. Agora só pode engadir botóns e .input-group-textcomo fillos directos dos grupos de entrada.
Finalmente solucionouse o raio de borde perdido no grupo de entrada con erro de validación engadindo unha .has-validationclase adicional aos grupos de entrada con validación.
Romper Eliminaron as clases de deseño específicas do formulario para o noso sistema de cuadrícula. Use a nosa rede e utilidades en lugar de .form-group, .form-row, ou .form-inline.
RomperAgora as etiquetas dos formularios requiren .form-label.
Romper .form-textxa non establece display, o que lle permite crear texto de axuda en liña ou bloquear como desexe só cambiando o elemento HTML.
Os controis de formularios xa non se usan fixados heightcando é posible, en lugar diso min-heightpara mellorar a personalización e a compatibilidade con outros compoñentes.
As iconas de validación xa non se aplican a <select>s con multiple.
Ficheiros de orixe Sass reorganizados en scss/forms/, incluídos os estilos de grupos de entrada.

Compoñentes

Valores unificados paddingpara alertas, rutas de navegación, tarxetas, menús despregables, grupos de listas, modais, popovers e informacións sobre ferramentas que se basean na nosa $spacervariable. Ver #30564 .

Acordeón

Engadiuse un novo compoñente de acordeón .

Alertas

Agora as alertas teñen exemplos con iconas .
Elimináronse os estilos personalizados para <hr>s en cada alerta xa que xa usan currentColor.

Insignias

RomperEliminaron todas .badge-*as clases de cores para as utilidades de fondo (por exemplo, use .bg-primaryen lugar de .badge-primary).
RomperDescartado .badge-pill: use a .rounded-pillutilidade no seu lugar.
RomperElimináronse os estilos de desprazamento e foco para <a>e <button>elementos.
Aumentou o recheo predeterminado para as insignias de .25em/ .5ema .35em/ .65em.

Migas de pan

Simplificouse a aparencia predeterminada das migas de pan eliminando padding, background-colore border-radius.
Engadiuse unha nova propiedade personalizada CSS --bs-breadcrumb-dividerpara unha personalización sinxela sen necesidade de recompilar CSS.

Botóns

Romper Os botóns de alternancia , con caixas de verificación ou radios, xa non requiren JavaScript e teñen un novo marcado. Xa non necesitamos un elemento de envoltura,engadimos.btn-checkao. Ver #30650 . Os documentos para isto pasaron da nosa páxina de Botóns á nova sección de Formularios.<input>.btn<label>
Romper Caído .btn-blockpor servizos públicos. En lugar de usalos .btn-blocken .btn, envolve os botóns cunha .d-gridutilidade .gap-*para espacialos segundo sexa necesario. Cambia ás clases receptivas para obter aínda máis control sobre elas. Lea os documentos para ver algúns exemplos.
Actualizouse o noso button-variant()e button-outline-variant()mixins para admitir parámetros adicionais.
Botóns actualizados para garantir un maior contraste nos estados activos e de paso.
Os botóns desactivados agora teñen pointer-events: none;.

Tarxeta

RomperCaído .card-decken favor da nosa grella. Envolve as túas tarxetas en clases de columnas e engade un .row-cols-*contedor principal para recrear mazos de cartas (pero con máis control sobre o aliñamento sensible).
RomperCaído .card-columnsa favor da Masonería. Ver #28922 .
RomperSubstituíuse o .cardacordeón baseado por un novo compoñente de acordeón .

Carrusel

Engadiuse unha nova .carousel-darkvariante para o texto escuro, os controis e os indicadores (ideal para fondos máis claros).
Substituíronse as iconas de chevron para os controis de carrusel por novos SVG de Bootstrap Icons .

Botón Pechar

RomperCambiou .closeo nome .btn-closepor un nome menos xenérico.
Os botóns de pechar agora usan un background-image(SVG incrustado) en lugar de un ×no HTML, o que permite unha personalización máis sinxela sen necesidade de tocar o seu marcado.
Engadiuse unha nova .btn-close-whitevariante que se usa filter: invert(1)para activar iconas de exclusión de contraste máis alto sobre fondos máis escuros.

Colapsar

Eliminouse a ancoraxe de scroll para acordeóns.

Despregables

Engadiuse unha nova .dropdown-menu-darkvariante e as variables asociadas para os menús despregables escuros baixo demanda.
Engadida unha nova variable para $dropdown-padding-x.
Escureceu o divisor do menú despregable para mellorar o contraste.
RomperTodos os eventos para o menú despregable agora desenvólvense no botón de alternancia do menú despregable e, a continuación, engádense ao elemento principal.
Os menús despregables agora teñen un data-bs-popper="static"atributo definido cando a posición do menú despregable é estática ou cando o menú despregable está na barra de navegación. Isto engádese polo noso JavaScript e axúdanos a usar estilos de posición personalizados sen interferir co posicionamento de Popper.
RomperOpción flipeliminada para o complemento despregable a favor da configuración nativa de Popper. Agora podes desactivar o comportamento de voltear pasando unha matriz baleira para a fallbackPlacementsopción no modificador de voltear .
Agora pódese facer clic nos menús despregables cunha nova autoCloseopción para xestionar o comportamento de peche automático . Podes usar esta opción para aceptar o clic dentro ou fóra do menú despregable para facelo interactivo.
Os menús despregables agora admiten .dropdown-items envoltos en <li>s.

Jumbotron

RomperDeixouse caer o compoñente jumbotron xa que se pode replicar con utilidades. Vexa o noso novo exemplo de Jumbotron para ver unha demostración.

Grupo de listas

Engadiuse un novo .list-group-numberedmodificador aos grupos de listas.

Navs e pestanas

Engadíronse novas nullvariables para font-size, font-weight, colore :hover colorá .nav-linkclase.

Barras de navegación

RomperAgora as barras de navegación requiren un contedor dentro (para simplificar drasticamente os requisitos de espazo e é necesario CSS).
RomperA .activeclase xa non se pode aplicar ao .nav-items, debe aplicarse directamente ao .nav-links.

Off lenzo

Engadiuse o novo compoñente offcanvas .

Paxinación

Agora as ligazóns de paxinación teñen elementos personalizables margin-leftque se redondean dinámicamente en todas as esquinas cando están separadas unhas doutras.
Engadiuse transitions ás ligazóns de paxinación.

Popovers

RomperRenombrado .arrowno .popover-arrownoso modelo de popover predeterminado.
whiteListOpción renomeada a allowList.

Spinners

Os spinners agora honran prefers-reduced-motion: reducediminuíndo as animacións. Ver #31882 .
Mellora a aliñación vertical do xiro.

Torradas

As tostadas agora pódense colocar nun .toast-containercoa axuda das utilidades de posicionamento .
Cambiouse a duración predeterminada do brindis a 5 segundos.
Retiradas overflow: hiddendas torradas e substituídas por border-radiuss propias con calc()funcións.

Suxestións sobre ferramentas

RomperCambiou o nome .arrowa .tooltip-arrowno noso modelo predeterminado de información sobre ferramentas.
RomperO valor predeterminado para o fallbackPlacementscámbiase a ['top', 'right', 'bottom', 'left']para unha mellor colocación dos elementos popper.
RomperwhiteListOpción renomeada a allowList.

Utilidades

RomperCambiouse o nome de varias utilidades para usar nomes de propiedade lóxica en lugar de nomes direccionais coa adición de compatibilidade con RTL:
- Renomeado .left-*e .right-*a .start-*e .end-*.
- Renomeado .float-lefte .float-righta .float-starte .float-end.
- Renomeado .border-lefte .border-righta .border-starte .border-end.
- Renomeado .rounded-lefte .rounded-righta .rounded-starte .rounded-end.
- Renomeado .ml-*e .mr-*a .ms-*e .me-*.
- Renomeado .pl-*e .pr-*a .ps-*e .pe-*.
- Renomeado .text-lefte .text-righta .text-starte .text-end.
RomperDesactiváronse as marxes negativas por defecto.
Engadiuse unha nova .bg-bodyclase para configurar rapidamente o <body>fondo de elementos adicionais.
Engadíronse novas utilidades de posición para top, right, bottome left. Os valores inclúen 0, 50%, e 100%para cada propiedade.
Engadíronse novas .translate-middle-xe .translate-middle-yutilidades para centrar horizontal ou verticalmente os elementos posicionados absolutos/fixos.
Engadíronse novas border-widthutilidades .
RomperRenombrado .text-monospacea .font-monospace.
RomperEliminado .text-hidexa que é un método anticuado para ocultar texto que xa non se debería usar.
Engadidas .fs-*utilidades para font-sizeutilidades (con RFS activado). Estes usan a mesma escala que os títulos predeterminados de HTML (1-6, de grande a pequeno) e pódense modificar mediante o mapa Sass.
Romper.font-weight-*Utilidades renomeadas en canto .fw-*á brevidade e coherencia.
Romper.font-style-*Utilidades renomeadas en canto .fst-*á brevidade e coherencia.
Engadido .d-gridpara mostrar utilidades e novas gaputilidades ( .gap) para CSS Grid e deseños de flexbox.
RomperEliminouse .rounded-sme rounded-lg, e introduciu unha nova escala de clases, .rounded-0a .rounded-3. Ver #31687 .
Engadíronse novas line-heightutilidades: .lh-1, .lh-sm, .lh-basee .lh-lg. Vexa aquí .
Movemos a .d-noneutilidade no noso CSS para darlle máis peso sobre outras utilidades de visualización.
Estendeuse o .visually-hidden-focusableaxudante para traballar tamén en contedores, usando :focus-within.

Axudantes

Romper Os axudantes de inserción responsive renombráronse aos axudantes de proporción con novos nomes de clases e comportamentos mellorados, así como unha variable CSS útil.
- Cambiouse o nome das clases para cambiar bya xrelación de aspecto. Por exemplo, .ratio-16by9é agora .ratio-16x9.
- Eliminamos o .embed-responsive-itemselector de grupos de elementos e a favor dun .ratio > *selector máis sinxelo. Non se necesita máis clase e o axudante de ratio agora funciona con calquera elemento HTML.
- O $embed-responsive-aspect-ratiosmapa Sass cambiou o nome a $aspect-ratiose os seus valores simplificáronse para incluír o nome da clase e a porcentaxe como key: valuepar.
- Agora xéranse variables CSS e inclúense para cada valor no mapa Sass. Modifique a --bs-aspect-ratiovariable .ratiopara crear calquera relación de aspecto personalizada .
Romper As clases de "lector de pantalla" agora son clases "visualmente ocultas" .
- Cambiouse o ficheiro Sass de scss/helpers/_screenreaders.scssascss/helpers/_visually-hidden.scss
- Renomeado .sr-onlye .sr-only-focusablea .visually-hiddene.visually-hidden-focusable
- Renombrado sr-only()e sr-only-focusable()mesturado a visually-hidden()e visually-hidden-focusable().
bootstrap-utilities.cssagora tamén inclúe os nosos axudantes. Xa non é necesario importar os axudantes nas compilacións personalizadas.

JavaScript

Eliminaron a dependencia de jQuery e reescribíronse os complementos para que estean en JavaScript normal.
RomperOs atributos de datos de todos os complementos de JavaScript están agora espaciados para axudar a distinguir a funcionalidade de Bootstrap de terceiros e do teu propio código. Por exemplo, usamos data-bs-toggleen lugar de data-toggle.
Todos os complementos agora poden aceptar un selector CSS como primeiro argumento. Podes pasar un elemento DOM ou calquera selector CSS válido para crear unha nova instancia do complemento:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigpódese pasar como unha función que acepta a configuración de Popper predeterminada de Bootstrap como argumento, para que poida combinar esta configuración predeterminada ao seu xeito. Aplícase aos menús despregables, emerxentes e información sobre ferramentas.
O valor predeterminado para o fallbackPlacementscámbiase a ['top', 'right', 'bottom', 'left']para unha mellor colocación dos elementos Popper. Aplícase aos menús despregables, emerxentes e información sobre ferramentas.
Eliminouse o guión baixo dos métodos estáticos públicos como _getInstance()→ getInstance().