Saltar al contenido principal Saltar a la navegación de la documentación
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.3.6

Dependencias

  • Migración de Hugo a Astro para construir nuestra documentación

v5.3.0

Si estás migrando desde nuestras versiones alfa anteriores de v5.3.0, revisa también sus cambios además de esta sección.

Helpers

  • Enlaces de color nuevamente tienen !important para que funcionen mejor con nuestras utilidades de enlace recién agregadas.

Utilidades

v5.3.0-alpha2

Si estás migrando desde nuestra versión alfa anterior de v5.3.0, revisa los cambios listados a continuación.

Variables CSS

  • Se eliminaron varias variables CSS raíz duplicadas y sin usar.

Modos de color

  • Los colores del modo oscuro ahora se derivan de nuestros colores de tema (ej., $primary) en Sass, en lugar de tintes o tonos específicos de color (ej., $blue-300). Esto permite un modo oscuro más automatizado al personalizar los colores de tema predeterminados.

  • Se agregaron mapas Sass para generar colores de tema para texto del modo oscuro, fondo sutil y borde sutil.

  • Los ejemplos de fragmentos ahora están listos para el modo oscuro con markup actualizado y estilos personalizados reducidos.

  • Se agregó color-scheme: dark al CSS del modo oscuro para cambiar los controles a nivel de SO como las barras de desplazamiento

  • Los estados de border-color y color de texto de la validación de formularios ahora responden al modo oscuro, gracias a nuevas variables Sass y CSS.

  • Se eliminaron las variables CSS de fondo de control de formulario agregadas recientemente y se reasignaron las variables Sass para usar variables CSS en su lugar. Esto simplifica el estilo entre modos de color y evita un problema donde los controles de formulario en modo oscuro no se actualizaban correctamente.

  • Nuestras box-shadows nuevamente siempre se mantendrán oscuras en lugar de invertirse a blanco cuando estén en modo oscuro.

  • Se mejoró el HTML y JavaScript de nuestro script de conmutación de modo de color. El selector para cambiar el SVG activo se ha mejorado, y el markup se ha hecho más accesible con atributos ARIA.

  • Se mejoraron los colores de sintaxis de código de la documentación y más entre los modos claro y oscuro.

Tipografía

  • Ya no establecemos un color para $headings-color-dark ni --bs-heading-color para el modo oscuro. Para evitar varios problemas de que los encabezados dentro de componentes aparezcan del color incorrecto, hemos establecido la variable Sass en null y agregado una comprobación de null como usamos en el modo claro predeterminado.

Componentes

  • Las tarjetas ahora tienen un color establecido para mejorar el renderizado entre modos de color.

  • Se agregó la nueva variante .nav-underline para nuestra navegación con un borde inferior más simple bajo el enlace de navegación activo. Consulta la documentación para ver un ejemplo.

  • Las navegaciones ahora tienen nuevos estilos :focus-visible que coinciden mejor con nuestros estilos de foco personalizados de botones.

Helpers

  • Se agregó el nuevo helper .icon-link para colocar y alinear rápidamente Bootstrap Icons junto a un enlace de texto. Los enlaces con icono también soportan nuestras nuevas utilidades de enlace.

  • Se agregó el nuevo helper de anillo de foco para eliminar el outline predeterminado y establecer un anillo de foco personalizado con box-shadow.

Utilidades

  • Se renombraron las variables Sass y CSS ${color}-text a ${color}-text-emphasis para coincidir con sus utilidades asociadas.

  • Se agregó el nuevo helper .link-body-emphasis junto a nuestros enlaces de color. Esto crea un enlace de color usando nuestro color de énfasis responsive al modo de color.

  • Se agregaron nuevas utilidades de enlace para opacidad de color del enlace, desplazamiento del subrayado, color del subrayado y opacidad del subrayado. Explora las nuevas utilidades de enlaces.

  • Las utilidades de border-width basadas en variables CSS se han revertido para establecer su propiedad directamente (como se hacía antes de v5.2.0). Esto evita problemas de herencia entre elementos anidados, incluyendo tablas.

  • Se agregó la nueva utilidad .border-black para coincidir con nuestras utilidades .text-black y .bg-black.

  • Obsoleto La utilidad .text-muted y la variable Sass $text-muted han quedado obsoletas y se han reemplazado con .text-body-secondary y $body-secondary-color.

Documentación

  • Los ejemplos ahora se muestran con el modo de color claro u oscuro apropiado según lo dictado por la configuración en nuestra documentación. Cada ejemplo tiene un selector individual de modo de color.

  • Se mejoró el JavaScript incluido para la demostración en vivo de Toast.

  • Se agregó el contenido del repositorio twbs/examples a la parte superior de la página de Ejemplos.

Herramientas

  • Se agregaron pruebas SCSS vía True para ayudar a probar nuestra API de utilidades y otras personalizaciones.

  • Se reemplazaron las instancias de nuestro proyecto bootstrap-npm-starter con el más nuevo y completo repositorio twbs/examples.

Para una lista completa de cambios, consulta el proyecto v5.3.0-alpha2 en GitHub.

v5.3.0-alpha1

¡Modos de color!

Aprende más leyendo la nueva documentación de modos de color.

  • Soporte global para modos de color claro (predeterminado) y oscuro. Establece el modo de color globalmente en el elemento :root, en grupos de elementos y componentes con una clase contenedora, o directamente en componentes, con data-bs-theme="light|dark". También se incluye un nuevo mixin color-mode() que puede generar un conjunto de reglas con el selector data-bs-theme o una media query, según tu preferencia.

    Obsoleto Los modos de color reemplazan las variantes oscuras de los componentes, por lo que .btn-close-white, .carousel-dark, .dropdown-menu-dark, y .navbar-dark están obsoletas.

  • Nuevo sistema de colores extendido. Hemos agregado nuevos colores de tema (pero no en $theme-colors) para una paleta de colores más matizada y a nivel de sistema con nuevos colores secundario, terciario y de énfasis para color y background-color. Estos nuevos colores están disponibles como variables Sass, variables CSS y utilidades.

  • También hemos ampliado nuestras variables Sass de colores de tema, variables CSS y utilidades para incluir énfasis de texto, colores de fondo sutil y colores de borde sutil. Están disponibles como variables Sass, variables CSS y utilidades.

  • Agrega la nueva hoja de estilos _variables-dark.scss para albergar las sobrescrituras específicas del modo oscuro. Esta hoja de estilos debe importarse inmediatamente después del archivo _variables.scss existente en tu pila de importaciones.

    diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 8f8296def..449d70487 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -6,6 +6,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

Variables CSS

  • Restaura las variables CSS para puntos de interrupción, aunque no las usamos en nuestras media queries ya que no son soportadas. Sin embargo, pueden ser útiles en contextos específicos de JS.

  • De acuerdo con la actualización de modos de color, hemos agregado nuevas utilidades para las nuevas variables CSS de Sass secondary y tertiary de texto y fondo, además de {color}-bg-subtle, {color}-border-subtle, y {color}-text-emphasis para nuestros colores de tema. Estos nuevos colores están disponibles a través de variables Sass y CSS (pero no en nuestros mapas de colores) con el objetivo expreso de facilitar la personalización entre múltiples modos de color como claro y oscuro.

  • Agrega variables adicionales para alertas, .btn-close, y .offcanvas.

  • La variable --bs-heading-color vuelve con una actualización y soporte para modo oscuro. Primero, ahora comprobamos un valor null en la variable Sass asociada, $headings-color, antes de intentar generar la variable CSS, por lo que por defecto no está presente en nuestro CSS compilado. Segundo, usamos la variable CSS con un valor de respaldo, inherit, permitiendo que el comportamiento original persista, pero también permitiendo sobrescrituras.

  • Convierte los enlaces para usar variables CSS en el estilo del color, pero no de text-decoration. Los colores ahora se establecen con --bs-link-color-rgb y --bs-link-opacity como color rgba(), permitiéndote personalizar la translucidez fácilmente. La pseudo-clase a:hover ahora sobrescribe --bs-link-color-rgb en lugar de establecer explícitamente la propiedad color.

  • --bs-border-width ahora se está usando en más componentes para mayor control sobre el estilo global predeterminado.

  • Agrega nuevas variables CSS raíz para nuestras box-shadows, incluyendo --bs-box-shadow, --bs-box-shadow-sm, --bs-box-shadow-lg, y --bs-box-shadow-inset.

Componentes

Alerta

  • Las variantes de alerta ahora se estilizan mediante variables CSS.

  • Obsoleto El mixin alert-variant() ahora está obsoleto. Ahora usamos un bucle Sass directamente para modificar las variables CSS predeterminadas del componente para cada variante.

Grupo de lista

  • Las variantes de elemento de grupo de lista ahora se estilizan mediante variables CSS.

  • Obsoleto El mixin list-group-item-variant() ahora está obsoleto. Ahora usamos un bucle Sass directamente para modificar las variables CSS predeterminadas del componente para cada variante.

Botón de cierre

Barras de progreso

El markup de las barras de progreso se ha actualizado en v5.3.0. Debido a la ubicación de role y varios atributos aria- en el elemento interno .progress-bar, algunos lectores de pantalla no anunciaban las barras de progreso con valor cero. Ahora, role="progressbar" y los atributos aria-* relevantes están en el elemento externo .progress, dejando el .progress-bar únicamente para la presentación visual de la barra y la etiqueta opcional.

Aunque recomendamos adoptar el nuevo markup para mejorar la compatibilidad con todos los lectores de pantalla, ten en cuenta que la estructura heredada de la barra de progreso seguirá funcionando como antes.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

También hemos introducido una nueva clase .progress-stacked para envolver lógicamente múltiples barras de progreso en una sola barra de progreso apilada.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Formularios

  • .form-control ahora se estiliza con variables CSS para soportar modos de color. Esto incluye la adición de dos nuevas variables CSS raíz para los fondos de control de formulario predeterminado y deshabilitado.

  • Los componentes .form-check y .form-switch ahora se construyen con variables CSS para establecer el background-image. El uso aquí difiere de otros componentes en que los diversos estados de foco, activo, etc. de cada componente no se establecen en la clase base. En su lugar, los estados sobrescriben una variable (ej., --bs-form-switch-bg).

  • Las etiquetas flotantes de formulario ahora tienen un background-color para arreglar el soporte para elementos <textarea>. Se han hecho cambios adicionales para soportar también estados deshabilitados y más.

  • Se corrigió la visualización de entradas de fecha y hora en navegadores basados en WebKit.

Utilidades

  • Obsoleto .text-muted será reemplazado por .text-body-secondary en v6.

    Con la adición de los colores de tema ampliados y variables, las variables y la utilidad .text-muted han quedado obsoletas con v5.3.0. Su valor predeterminado también se ha reasignado a la nueva variable CSS --bs-secondary-color para soportar mejor los modos de color. Se eliminará en v6.0.0.

  • Agrega nuevas utilidades .overflow-x, .overflow-y, y varias .object-fit-*. La propiedad object-fit se usa para especificar cómo un <img> o <video> debe redimensionarse para ajustarse a su contenedor, dándonos una alternativa responsive a usar background-image para una imagen redimensionable de relleno/ajuste.

  • Agrega la nueva utilidad .fw-medium.

  • Se agregaron nuevas utilidades .z-* para z-index.

  • Las utilidades de sombra (y variables Sass) se han actualizado para el modo oscuro. Ahora usan --bs-body-color-rgb para generar los valores de color rgba(), permitiéndoles adaptarse fácilmente a los modos de color según el color de primer plano especificado.

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

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 de los componentes (ej., .btn), permitiendo una personalización más 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

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.

v5.0.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 agregó 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 punto de interrupción mismo en lugar del siguiente punto de interrupción (ej., media-breakpoint-between(sm, lg) en lugar de media-breakpoint-between(sm, md) tiene como objetivo los 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.

  • Mejora del 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 asegurar el contraste WCAG 2.2 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 de la 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 a menudo no se usaban. Ahora solo proporcionamos .order-0 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-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-control-file han sido reemplazados 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

Alertas

  • Las alerts ahora tienen ejemplos con iconos.

  • Se eliminaron los estilos personalizados para <hr> en cada alert ya que ahora usan currentColor.

Insignias

  • 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.

  • 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;.

Tarjeta

  • 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.

  • 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.

Colapso

  • Se eliminó el anclaje de scroll para los acordeones.

  • 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

Grupo de lista

  • Se añadieron nuevas variables null para font-size, font-weight, color y color de :hover color a la clase .nav-link.
  • 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

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ó .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 renombraron .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 renombró la utilidad .font-italic a .fst-italic por brevedad y consistencia con la nueva utilidad .fst-normal.

  • 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 "visually hidden".

    • 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().

  • Se eliminó util.js, con su funcionalidad ahora integrada en plugins individuales. Si previamente incluías util.js manualmente, puedes eliminarlo de forma segura, ya que ya no es necesario. Cada plugin ahora contiene solo las utilidades que requiere, mejorando la modularidad y reduciendo las dependencias.

Traducción mantenida por Esdocu. Visita esdocu.com para ver más documentaciones traducidas.