Migración a v5 (Migrating to v5)

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

En esta página

v5.3.6

Dependencias

Se migró de Hugo a Astro para la construcción de nuestra documentación.

v5.3.0

Si vas a migrar desde nuestras versiones alfa anteriores de v5.3.0, revisa sus cambios además de esta sección.

Ayudantes (Helpers)

Los enlaces coloreados vuelven a tener !important para que funcionen mejor con nuestras utilidades de enlaces recién agregadas.

Utilidades

Se agregó la nueva utilidad de visualización .d-inline-grid.

v5.3.0-alpha2

Si vas a migrar desde nuestra versión alfa anterior de v5.3.0, revisa los cambios que se enumeran a continuación.

Variables CSS

Se eliminaron varias variables CSS de root duplicadas y no utilizadas.

Modos de color

Los colores del modo oscuro ahora se derivan de nuestros colores del tema (por ejemplo, $primary) en Sass, en lugar de tintes o matices específicos de color (por ejemplo, $blue-300). Esto permite un modo oscuro más automatizado al personalizar los colores predeterminados del tema.
Se agregaron mapas Sass para generar colores de tema para texto en modo oscuro, fondo sutil y borde sutil.
Los ejemplos de fragmentos (snippets) ahora están listos para el modo oscuro con marcado actualizado y estilos personalizados reducidos.
Se agregó color-scheme: dark al CSS del modo oscuro para cambiar los controles a nivel de sistema operativo como las barras de desplazamiento.
Los estados de validación de formulario border-color y color de texto ahora responden al modo oscuro, gracias a las 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 en todos los modos de color y evita un problema por el cual los controles de formulario en modo oscuro no se actualizaban correctamente.
Nuestras box-shadow volverán a permanecer oscuras en lugar de invertirse a blanco en el modo oscuro.
Se mejoraron el HTML y JavaScript para nuestro script de alternancia de modo de color. Se mejoró el selector para cambiar el SVG activo y se hizo el marcado más accesible con atributos ARIA.
Se mejoraron los colores de sintaxis del código de la documentación y más en los modos claro y oscuro.

Tipografía

Ya no establecemos un color para $headings-color-dark o --bs-heading-color para el modo oscuro. Para evitar varios problemas de encabezados dentro de componentes que aparecen con el color incorrecto, configuramos la variable Sass en null y agregamos una verificación de null como la que usamos en el modo claro predeterminado.

Componentes

Las tarjetas (cards) ahora tienen un color establecido para mejorar la representación en todos los modos de color.
Se agregó la nueva variante .nav-underline para nuestra navegación con un borde inferior más simple debajo del enlace de navegación activo. Consulta la documentación para ver un ejemplo.
Los navs ahora tienen nuevos estilos :focus-visible que coinciden mejor con nuestros estilos de enfoque de botones personalizados.

Ayudantes (Helpers)

Se agregó el nuevo ayudante .icon-link para colocar y alinear rápidamente Bootstrap Icons junto a un enlace textual. Los enlaces de iconos también admiten nuestras nuevas utilidades de enlaces.
Se agregó el nuevo ayudante de anillo de enfoque para eliminar el outline predeterminado y establecer un anillo de enfoque box-shadow personalizado.

Utilidades

Se cambiaron de nombre las variables Sass y CSS ${color}-text a ${color}-text-emphasis para que coincidan con sus utilidades asociadas.
Se agregó el nuevo ayudante .link-body-emphasis junto con nuestros enlaces coloreados. Esto crea un enlace de color utilizando nuestro color de énfasis adaptable al modo de color.
Se agregaron nuevas utilidades de enlaces para la opacidad del color del enlace, el desplazamiento del subrayado, el color del subrayado y la 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, incluidas las 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 han sido reemplazadas por .text-body-secondary y $body-secondary-color.

Documentación (Docs)

Los ejemplos ahora se muestran con el modo de color claro u oscuro apropiado según lo dicte la configuración de nuestra documentación. Cada ejemplo tiene un selector de modo de color individual.
Se mejoró el JavaScript incluido para la demostración en vivo de Toast.
Se agregaron los contenidos del repositorio twbs/examples a la parte superior de la página de ejemplos.

Herramientas (Tooling)

Se agregaron pruebas de SCSS a través de True para ayudar a probar nuestra API de utilidades y otras personalizaciones.
Se reemplazaron las instancias de nuestro proyecto bootstrap-npm-starter por el repositorio twbs/examples repo más nuevo y completo.

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

v5.3.0-alpha1

¡Modos de color!

Obtén más información 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 para los componentes, por lo que .btn-close-white, .carousel-dark, .dropdown-menu-dark y .navbar-dark están obsoletos.
Nuevo sistema de color extendido. Hemos agregado nuevos colores de tema (pero no en $theme-colors) para una paleta de colores más matizada en todo el sistema con nuevos colores secundarios, terciarios 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 color de tema, variables CSS y utilidades para incluir énfasis de texto, colores de fondo sutiles y colores de borde sutiles. Estos están disponibles como variables Sass, variables CSS y utilidades.

Agrega la nueva hoja de estilo _variables-dark.scss para albergar anulaciones específicas del modo oscuro. Esta hoja de estilo debe importarse inmediatamente después del archivo _variables.scss existente en tu pila de importación.

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 variables CSS para puntos de interrupción, aunque no las usamos en nuestras media queries porque no son compatibles. Sin embargo, estas pueden ser útiles en contextos específicos de JS.
De acuerdo con la actualización de los modos de color, hemos agregado nuevas utilidades para las nuevas variables CSS Sass de colores de texto y fondo secondary y tertiary, 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 de nuestros mapas de colores) con el objetivo expreso de facilitar la personalización en múltiples modos de colores, como claro y oscuro.
Agrega variables adicionales para alertas, .btn-close y .offcanvas.
La variable --bs-heading-color regresa con una actualización y soporte para modo oscuro. Primero, ahora verificamos un valor null en la variable Sass asociada, $headings-color, antes de intentar generar la variable CSS, por lo que de manera predeterminada no está presente en nuestro CSS compilado. Segundo, usamos la variable CSS con un valor de respaldo, inherit, lo que permite que el comportamiento original persista, pero también permite anulaciones.
Convierte los enlaces para usar variables CSS para diseñar el color, pero no la text-decoration. Los colores ahora se configuran con --bs-link-color-rgb and --bs-link-opacity como color rgba(), lo que te permite personalizar la translucidez con facilidad. La pseudo-clase a:hover ahora anula --bs-link-color-rgb en lugar de establecer explícitamente la propiedad color.
--bs-border-width ahora se usa en más componentes para un mayor control sobre el estilo global predeterminado.
Agrega nuevas variables CSS de root para nuestras box-shadows, incluyendo --bs-box-shadow, --bs-box-shadow-sm, --bs-box-shadow-lg y --bs-box-shadow-inset.

Componentes

Alerta (Alert)

Las variantes de alerta ahora tienen estilos a través de 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 (List group)

Las variantes de elementos de grupos de lista ahora tienen estilos a través de 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.

Menús desplegables (Dropdowns)

Obsoleto La clase .dropdown-menu-dark ha quedado obsoleta y ha sido reemplazada por data-bs-theme="dark" en el dropdown o en cualquier elemento padre. Consulta la documentación para ver un ejemplo.

Botón de cierre (Close button)

Obsoleto La clase .btn-close-white ha quedado obsoleta y ha sido reemplazada por data-bs-theme="dark" en el botón de cierre o en cualquier elemento padre. Consulta la documentación para ver un ejemplo.

Obsoleto La clase .navbar-dark ha quedado obsoleta y ha sido reemplazada por data-bs-theme="dark" en la barra de navegación o en cualquier elemento padre. Consulta la documentación para ver ejemplos actualizados.

Barras de progreso (Progress bars)

El marcado para las barras de progreso se actualizó 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 barras de progreso de valor cero. Ahora, role="progressbar" y los atributos aria-* relevantes están en el elemento externo .progress, dejando la .progress-bar puramente para la presentación visual de la barra y la etiqueta opcional.

Si bien recomendamos adoptar el nuevo marcado para una mejor compatibilidad con todos los lectores de pantalla, ten en cuenta que la estructura de barra de progreso heredada continuará funcionando como antes.

<!-- Marcado anterior -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Ejemplo básico" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Marcado nuevo -->
<div class="progress" role="progressbar" aria-label="Ejemplo básico" 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 de forma más lógica múltiples barras de progreso en una sola barra de progreso apilada.

<!-- Marcado anterior -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segmento uno" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segmento dos" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segmento tres" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Marcado nuevo -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segmento uno" 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="Segmento dos" 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="Segmento tres" 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 tiene estilos con variables CSS para admitir modos de color. Esto incluye la adición de dos nuevas variables CSS de root para los fondos de control de formulario predeterminados y deshabilitados.
Los componentes .form-check y .form-switch ahora se crean con variables CSS para establecer la background-image. El uso aquí difiere de otros componentes en que los distintos estados de enfoque, activo, etc. para cada componente no se establecen en la clase base. En su lugar, los estados anulan una variable (por ejemplo, --bs-form-switch-bg).
Las etiquetas de formulario flotantes ahora tienen un background-color para corregir el soporte para los elementos <textarea>. Se han realizado cambios adicionales para admitir 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 y variables de tema ampliados, las variables y la utilidad .text-muted han quedado obsoletas en v5.3.0. Su valor predeterminado también se reasignó a la nueva variable CSS --bs-secondary-color para admitir mejor los modos de color. Se eliminará en v6.0.0.
Agrega nuevas utilidades .overflow-x, .overflow-y y varias utilidades .object-fit-*. La propiedad object-fit se utiliza para especificar cómo se debe redimensionar un <img> o <video> para adaptarse a su contenedor, lo que nos brinda una alternativa adaptable al uso de background-image para una imagen de relleno/ajuste redimensionable.
Agrega la nueva utilidad .fw-medium.
Se agregaron nuevas utilidades .z-* para z-index.
Las utilidades de sombra de caja (box shadow) (y las variables Sass) se han actualizado para el modo oscuro. Ahora usan --bs-body-color-rgb para generar los valores de color rgba(), lo que les permite adaptarse fácilmente a los modos de color según el color de primer plano especificado.

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

v5.2.0

Diseño renovado

Bootstrap v5.2.0 presenta una sutil actualización de diseño para un puñado de componentes y propiedades en todo el proyecto, sobre todo 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 documentación más simple que ya no colapsa las secciones de la barra lateral y ejemplos más destacados de Bootstrap Icons.

Más variables CSS

Hemos actualizado todos nuestros componentes para usar variables CSS. Si bien Sass sigue siendo la base de todo, cada componente se ha actualizado para incluir variables CSS en las clases base del componente (por ejemplo, .btn), lo que permite una personalización de Bootstrap en tiempo real. En versiones posteriores, continuaremos expandiendo nuestro uso de variables CSS en nuestros diseños, formularios, ayudantes y utilidades. Lee más sobre las variables CSS en cada componente en sus respectivas páginas de documentación.

El uso de nuestras variables CSS estará algo incompleto hasta Bootstrap 6. Si bien nos encantaría implementarlas por completo en todos los ámbitos, corren el riesgo de causar cambios importantes. Por ejemplo, configurar $alert-border-width: var(--bs-border-width) en nuestro código fuente rompe el Sass potencial en tu propio código si estabas haciendo $alert-border-width * 2 por alguna razón.

Como tal, siempre que sea posible, continuaremos presionando hacia más variables CSS, pero reconoce que nuestra implementación puede estar ligeramente limitada en v5.

Nuevo `_maps.scss`

Bootstrap v5.2.0 introdujo un nuevo archivo Sass con _maps.scss. Extrae varios mapas Sass de _variables.scss para solucionar un problema por el cual las actualizaciones de un mapa original no se aplicaban a los mapas secundarios que los extienden. Por ejemplo, las actualizaciones de $theme-colors no se aplicaban a otros mapas de temas que dependían de $theme-colors, lo que rompía los flujos de trabajo de personalización clave. En resumen, Sass tiene una limitación por la cual, una vez que se ha utilizado una variable o un mapa predeterminado, no se puede actualizar. Existe una deficiencia similar con las variables CSS cuando se usan para componer otras variables CSS.

Es por eso que las personalizaciones de variables en Bootstrap deben realizarse después de @import "functions", pero antes de @import "variables" y el resto de nuestra pila de importación. Lo mismo se aplica a los mapas Sass: debes anular los valores predeterminados antes de usarlos. 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 compilaciones personalizadas de CSS de Bootstrap ahora deberían verse así con una importación de mapas separada.

  // Las funciones van primero
  @import "functions";

  // Anulaciones de variables opcionales aquí
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Las variables vienen a continuación
  @import "variables";

+ // Anulaciones de mapas Sass opcionales aquí
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Seguido por nuestros mapas predeterminados
+ @import "maps";
+
  // El resto de nuestras importaciones
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Nuevas utilidades

Se ampliaron las utilidades font-weight para incluir .fw-semibold para fuentes seminegritas.
Se ampliaron las utilidades de radio de borde (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-* aún se compilarán, a menos que esta opción se establezca en false. Los contenedores ahora también mantienen sus valores de canaletas (gutters).
El componente Offcanvas ahora tiene variantes responsivas. La clase .offcanvas original permanece sin cambios: oculta el contenido en todas las ventanas gráficas. Para que sea responsivo, cambia esa clase .offcanvas por cualquier clase .offcanvas-{sm|md|lg|xl|xxl}.
Los divisores de tabla más gruesos ahora son opcionales. — Eliminamos el borde más grueso y difícil de anular entre grupos de tablas y lo movimos a una clase opcional que puedes aplicar, .table-group-divider. Consulta la documentación de tablas para ver un ejemplo.
Scrollspy ha sido reescrito para usar la API Intersection Observer, lo que significa que ya no necesitas contenedores primarios relativos, deja obsoleta la configuración offset y más. Espera que tus implementaciones de Scrollspy sean más precisas y consistentes en su resaltado de navegación.
Los popovers y tooltips ahora usan variables CSS. Algunas variables CSS se actualizaron a partir de sus contrapartes Sass para reducir la cantidad de variables. Como resultado, tres variables quedaron obsoletas en esta versión: $popover-arrow-color, $popover-arrow-outer-color y $tooltip-arrow-color.
Se agregaron nuevos ayudantes .text-bg-{color}. En lugar de configurar utilidades individuales .text-* y .bg-*, ahora puedes usar los ayudantes .text-bg-* para configurar un background-color con un color de primer plano contrastante.
Se agregó el modificador .form-check-reverse para invertir el orden de las etiquetas y las casillas de verificación/radios asociados.
Se agregó soporte para columnas rayadas a las tablas a través de la nueva clase .table-striped-columns.

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

v5.1.0

Se agregó soporte experimental para diseño CSS Grid. — Este es un trabajo en progreso y aún no está listo para su uso en producción, pero puedes optar por la nueva función a través de Sass. Para habilitarlo, deshabilita la cuadrícula predeterminada configurando $enable-grid-classes: false y habilita la cuadrícula CSS configurando $enable-cssgrid: true.
Barras de navegación actualizadas para admitir offcanvas. — Agrega cajones offcanvas en cualquier barra de navegación con las clases responsivas .navbar-expand-* y algo de marcado offcanvas.
Se agregó un nuevo componente de marcador de posición (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 aplicación.
El complemento Collapse ahora admite despliegue horizontal. — Agrega .collapse-horizontal a tu .collapse para contraer el ancho (width) en lugar de la altura (height). Evita que el navegador tenga que volver a pintar (repainting) estableciendo un min-height o height.
Se agregaron nuevos ayudantes de pila (stack) y regla vertical. — Aplica rápidamente múltiples propiedades de flexbox para crear diseños personalizados rápidamente con pilas (stacks). Elige entre pilas horizontales (.hstack) y verticales (.vstack). Agrega divisores verticales similares a los elementos <hr> con los nuevos ayudantes .vr.
Se agregaron nuevas variables CSS globales :root. — Se agregaron varias variables CSS nuevas al nivel :root para controlar los estilos del <body>. Hay más en camino, incluso en nuestras utilidades y componentes, pero por ahora lee sobre las variables CSS en la sección Personalizar.
Se revisaron las utilidades de color y fondo para usar variables CSS, y se agregaron nuevas utilidades de opacidad del texto y opacidad de fondo. — Las utilidades .text-* y .bg-* ahora se crean con variables CSS y valores de color rgba(), lo que te permite personalizar fácilmente cualquier utilidad con nuevas utilidades de opacidad.
Se agregaron nuevos ejemplos de fragmentos (snippets) para mostrar cómo personalizar nuestros componentes. — Extrae componentes personalizados listos para usar y otros patrones de diseño comunes con nuestros nuevos ejemplos de fragmentos (snippets). Incluye pies de página, menús desplegables, grupos de listas y modales.
Se eliminaron los estilos de posicionamiento no utilizados de los popovers y tooltips ya que Popper los maneja únicamente. $tooltip-margin quedó obsoleto y se estableció en null en el proceso.

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

v5.0.0

¡Hola! Los cambios de nuestra primera versión principal de Bootstrap 5, v5.0.0, se documentan a continuación. No reflejan los cambios adicionales que se muestran arriba.

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 estaba obsoleto.
Se migró de Jekyll a Hugo para la construcción de nuestra documentación.

Soporte de navegadores

Se eliminó Internet Explorer 10 y 11.
Se eliminó Microsoft Edge < 16 (Edge heredado).
Se eliminó Firefox < 60.
Se eliminó Safari < 12.
Se eliminó iOS Safari < 12.
Se eliminó Chrome < 60.

Cambios en la documentación

Se rediseñó la página de inicio, el diseño de la documentación y el pie de página.
Se agregó una nueva guía de Parcel.
Se agregó una nueva sección Personalizar, que reemplaza la página de temas de la 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 la nueva sección Formularios, dividiendo el contenido en páginas más enfocadas.
De manera similar, se actualizó la sección Diseño para desarrollar el contenido de la cuadrícula con mayor claridad.
Se cambió el nombre de la página del componente "Navs" a "Navs y pestañas (Navs & Tabs)".
Se cambió el nombre de la página "Checks" a "Checks y radios".
Se rediseñó la barra de navegación y se agregó una nueva subnavegación para facilitar el desplazamiento por nuestros sitios y versiones de documentación.
Se agregó un nuevo método abreviado de teclado para el campo de búsqueda: Ctrl + /.

Sass

Hemos descartado las combinaciones predeterminadas de mapas Sass para facilitar la eliminación de valores redundantes. Ten en cuenta que ahora debes definir todos los valores en los mapas Sass como $theme-colors. Descubre cómo lidiar con los mapas Sass.
Crítico Se cambió el nombre de 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 pasa a llamarse $min-contrast-ratio.
- $yiq-text-dark y $yiq-text-light pasan a llamarse respectivamente $color-contrast-dark y $color-contrast-light.
Crítico Los parámetros de los mixins de media query han cambiado para lograr un enfoque más lógico.
- media-breakpoint-down() utiliza el punto de interrupción en sí en lugar del siguiente punto de interrupción (por ejemplo, media-breakpoint-down(lg) en lugar de media-breakpoint-down(md) se dirige a ventanas gráficas más pequeñas que lg).
- De manera similar, el segundo parámetro en media-breakpoint-between() también usa el punto de interrupción en sí en lugar del siguiente (por ejemplo, media-breakpoint-between(sm, lg) en lugar de media-breakpoint-between(sm, md) se dirige a ventanas gráficas entre sm y lg).
Crítico Se eliminaron los estilos de impresión y la variable $enable-print-styles. Las clases de visualización de impresión siguen existiendo. Ver #28339.
Crítico Se eliminaron las funciones color(), theme-color() y gray() en favor de las variables. Ver #29083.
Crítico Se cambió el nombre de 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 Ten cuidado: color-level() se eliminó más adelante en la versión v5.0.0-alpha3.
Crítico Se cambió el nombre de $enable-prefers-reduced-motion-media-query y $enable-pointer-cursor-for-buttons a $enable-reduced-motion y $enable-button-pointers para abreviar.
Crítico Se eliminó el mixin bg-gradient-variant(). Usa la clase .bg-gradient para agregar degradados a los elementos en lugar de las clases .bg-gradient-* generadas.
Crítico Se eliminaron mixins previamente obsoletos:
- 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 de utilidad asociada, .text-hide)
- visibility()
- form-control-focus()
Crítico Se cambió el nombre de la función scale-color() a shift-color() para evitar colisiones con la propia función de escalado de color de Sass.
Los mixins box-shadow ahora permiten valores null y descartan none de múltiples argumentos. Ver #30394.
El mixin border-radius() ahora tiene un valor predeterminado.

Sistema de color

El sistema de color que funcionaba con color-level() y $theme-color-interval se eliminó en favor de un nuevo sistema de color. Todas las funciones lighten() y darken() en nuestro código base se reemplazan 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. El shift-color() aplicará tinte o sombra a un color dependiendo de si su parámetro de peso es positivo o negativo. Consulta el PR #30622 para obtener más detalles.
Se agregaron nuevos tintes y sombras para cada color, proporcionando nueve colores separados para cada color base, como nuevas variables Sass.
Contraste de color mejorado. 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.2 AA. También cambiamos nuestro color de contraste de color de $gray-900 a $black.
Para respaldar nuestro sistema de colores, agregamos nuevas funciones personalizadas tint-color() y shade-color() para mezclar nuestros colores adecuadamente.

Actualizaciones de cuadrícula (Grid updates)

¡Nuevo punto de interrupción! Se agregó un nuevo punto de interrupción xxl para 1400px y superior. Sin cambios en todos los demás puntos de interrupción.
Canaletas (gutters) mejoradas. Las canaletas ahora se establecen en rems y son más estrechas que en la v4 (1.5rem, o aproximadamente 24px, por debajo de 30px). Esto alinea las canaletas de nuestro sistema de cuadrícula con nuestras utilidades de espaciado.
- Se agregó una nueva clase de canaleta (.g-*, .gx-* y .gy-*) para controlar las canaletas horizontales/verticales, las canaletas horizontales y las canaletas verticales.
- Crítico Se cambió el nombre de .no-gutters a .g-0 para coincidir con las nuevas utilidades de canaletas.
A las columnas ya no se les aplica position: relative, por lo que es posible que debas agregar .position-relative a algunos elementos para restaurar ese comportamiento.
Crítico Se eliminaron varias clases .order-* que a menudo no se usaban. Ahora solo proporcionamos .order-0 a .order-5 de forma predeterminada.
Crítico Se eliminó el componente .media, ya que se puede replicar fácilmente con utilidades. Consulta el PR #28265 y la página de utilidades flex para ver un ejemplo.
Crítico bootstrap-grid.css ahora solo aplica box-sizing: border-box a la columna en lugar de restablecer el box-sizing global. De esta manera, nuestros estilos de cuadrícula se pueden utilizar 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 sea 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 la ventana gráfica. Esta característica era anteriormente opcional en la v4.
Crítico Se revisó nuestra tipografía de pantalla (display) para reemplazar nuestras variables $display-* por un mapa Sass $display-font-sizes. También se eliminaron las variables $display-*-weight individuales para un solo $display-font-weight y se ajustaron los font-sizes.
Se agregaron dos nuevos tamaños de encabezado .display-*, .display-5 y .display-6.
Los enlaces están subrayados por defecto (no solo al pasar el cursor), a menos que formen parte de componentes específicos.
Tablas rediseñadas para refrescar sus estilos y reconstruirlas con variables CSS para un mayor control sobre el diseño.
Crítico Las tablas anidadas ya no heredan estilos.
Crítico Se eliminaron .thead-light y .thead-dark en favor de las clases variantes .table-* que se pueden usar para todos los elementos de la tabla (thead, tbody, tfoot, tr, th y td).
Crítico El mixin table-row-variant() pasa a llamarse 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 en función de las variables del factor de la tabla.
Se dividieron las variables de relleno de las celdas de la tabla en -y y -x.
Crítico Se eliminó la clase .pre-scrollable. Ver #29135
Crítico Las utilidades .text-* ya no agregan estados de hover y focus a los enlaces. En su lugar, se pueden utilizar clases auxiliares .link-*. Ver #29267
Crítico Se eliminó la clase .text-justify. Ver #29793
Crítico Los elementos <hr> ahora usan height en lugar de border para soportar mejor el atributo size. Esto también permite el uso de utilidades de relleno para crear divisores más gruesos (por ejemplo, <hr class="py-1">).
Se restableció el padding-left horizontal predeterminado en los elementos <ul> y <ol> de 40px predeterminado del navegador a 2rem.
Se agregó $enable-smooth-scroll, que aplica scroll-behavior: smooth a nivel global, 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 la dirección horizontal se han renombrado para usar propiedades lógicas como las que se encuentran en los diseños flexbox, por ejemplo, start y end en lugar de left y right.

Formularios

¡Se agregaron nuevos formularios flotantes! Hemos promovido el ejemplo de etiquetas flotantes a componentes de formulario totalmente compatibles. Consulta la nueva página de etiquetas flotantes (Floating labels).
Crítico Elementos de formulario nativos y personalizados consolidados. Se han consolidado las casillas de verificación, los radios, los selectores y otras entradas que tenían clases nativas y personalizadas en la v4. 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 se han reemplazado por estilos personalizados encima de .form-control.
- .custom-range ahora es .form-range.
- Se eliminaron los .form-control-file y .form-control-range nativos.
Crítico Se eliminaron .input-group-append y .input-group-prepend. Ahora puedes agregar botones y .input-group-text como hijos directos de los grupos de entrada.
El antiguo error Falta el radio del borde en el grupo de entrada con error de retroalimentación de validación finalmente se solucionó agregando una clase .has-validation adicional a los grupos de entrada con validación.
Crítico Se eliminaron las clases de diseño específicas de formularios para nuestro sistema de cuadrícula. Utiliza nuestra cuadrícula y utilidades en lugar de .form-group, .form-row o .form-inline.
Crítico Las etiquetas de los formularios ahora requieren .form-label.
Crítico .form-text ya no establece display, lo que te permite crear texto de ayuda en línea o en bloque como desees simplemente cambiando el elemento HTML.
Los controles de formulario ya no usaban una height fija cuando era posible, sino que diferían a min-height para mejorar la personalización y la compatibilidad con otros componentes.
Las pestañas de validación ya no se aplican a los <select>s con multiple.
Se reorganizaron los archivos Sass de origen en scss/forms/, incluidos los estilos de los grupos de entrada.

Componentes

Valores de padding unificados para alertas, migas de pan, tarjetas, menús desplegables, grupos de listas, modales, ventanas emergentes y tooltips basados en nuestra variable $spacer. Ver #30564.

Acordeón (Accordion)

Se agregó el nuevo componente acordeón.

Alertas (Alerts)

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

Insignias (Badges)

Crítico Se eliminaron todas las clases de color .badge-* para las utilidades de fondo (por ejemplo, usa .bg-primary en lugar de .badge-primary).
Crítico Se eliminó .badge-pill; en su lugar, usa la utilidad .rounded-pill.
Crítico Se eliminaron los estilos de hover y focus para los elementos <a> y <button>.
Se aumentó el relleno predeterminado para las insignias de .25em/.5em a .35em/.65em.

Migas de pan (Breadcrumbs)

Se simplificó la apariencia predeterminada de las migas de pan al eliminar padding, background-color y border-radius.
Se agregó la nueva propiedad personalizada CSS --bs-breadcrumb-divider para una personalización sencilla sin necesidad de volver a compilar CSS.

Botones (Buttons)

Crítico Los botones de alternancia, con casillas de verificación o radios, ya no requieren JavaScript y tienen un marcado nuevo. Ya no requerimos un elemento contenedor, agregamos .btn-check al <input> y lo emparejamos con cualquier clase .btn en el <label>. Ver #30650. La documentación de esto se movió de nuestra página de Botones a la nueva sección Formularios.
Crítico Se eliminó .btn-block en favor de las 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 tener aún más control sobre ellos. Lee la documentación para ver algunos ejemplos.
Se actualizaron nuestros mixins button-variant() y button-outline-variant() para admitir parámetros adicionales.
Se actualizaron los botones para garantizar un mayor contraste en los estados de hover y activo.
Los botones deshabilitados ahora tienen pointer-events: none;.

Tarjetas (Card)

Crítico Se eliminó .card-deck en favor de nuestra cuadrícula. Envuelve tus tarjetas en clases de columna y agrega un contenedor primario .row-cols-* para recrear barajas de tarjetas (pero con más control sobre la alineación adaptable).
Crítico Se eliminó .card-columns en favor de Masonry. Ver #28922.
Crítico Se reemplazó el acordeón basado en .card por un nuevo componente Accordion.

Carrusel (Carousel)

Se agregó la nueva variante .carousel-dark para texto oscuro, controles e indicadores (ideal para fondos más claros).
Se reemplazaron los iconos de chevron para los controles del carrusel con nuevos SVG de Bootstrap Icons.

Botón de cierre (Close button)

Crítico Se cambió el nombre de .close a .btn-close para obtener un nombre menos genérico.
Los botones de cierre ahora usan una background-image (SVG incrustado) en lugar de un × en el HTML, lo que permite una personalización más sencilla sin necesidad de tocar el marcado.
Se agregó la nueva variante .btn-close-white que usa filter: invert(1) para habilitar iconos de descarte de mayor contraste contra fondos más oscuros.

Colapso (Collapse)

Se eliminó el anclaje de desplazamiento para acordeones.

Menús desplegables (Dropdowns)

Se agregó la nueva variante .dropdown-menu-dark y variables asociadas para menús desplegables oscuros a pedido.
Se agregó una nueva variable para $dropdown-padding-x.
Se oscureció el divisor del menú desplegable para mejorar el contraste.
Crítico Todos los eventos para el menú desplegable ahora se activan en el botón de alternancia del menú desplegable y luego se propagan al elemento padre.
Los menús desplegables ahora tienen un atributo data-bs-popper="static" establecido cuando el posicionamiento del menú desplegable es estático, o el menú desplegable está en la barra de navegación. Esto lo agrega nuestro JavaScript y nos ayuda a usar estilos de posición personalizados sin interferir con el posicionamiento de Popper.
Crítico Se eliminó la opción flip para el complemento desplegable en favor de la configuración nativa de Popper. Ahora puedes desactivar el comportamiento de volteo pasando una matriz vacía para la opción fallbackPlacements en el modificador flip.
Los menús desplegables ahora se pueden hacer clic con una nueva opción autoClose para manejar el comportamiento de cierre automático. Puedes usar esta opción para aceptar el clic dentro o fuera del menú desplegable para hacerlo interactivo.
Los menús desplegables ahora admiten .dropdown-item envueltos en <li>.

Jumbotron

Crítico Se eliminó el componente jumbotron ya que se puede replicar con utilidades. Consulta nuestro nuevo ejemplo de Jumbotron para ver una demostración.

Grupo de lista (List group)

Se agregó el nuevo modificador .list-group-numbered a los grupos de listas.

Navs y pestañas (Navs and tabs)

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

Barras de navegación (Navbars)

Crítico Las barras de navegación ahora requieren un contenedor en su interior (para simplificar drásticamente los requisitos de espacio y el CSS requerido).
Crítico La clase .active ya no se puede aplicar a los .nav-item, debe aplicarse directamente a los .nav-link.

Offcanvas

Se agregó el nuevo componente offcanvas.

Paginación (Pagination)

Los enlaces de paginación ahora tienen un margin-left personalizable que se redondea dinámicamente en todas las esquinas cuando se separan entre sí.
Se agregaron transitions a los enlaces de paginación.

Popovers

Crítico Se cambió el nombre de .arrow a .popover-arrow en nuestra plantilla de popover predeterminada.
Se cambió el nombre de la opción whiteList a allowList.

Spinners

Los spinners ahora respetan prefers-reduced-motion: reduce al ralentizar las animaciones. Ver #31882.
Alineación vertical del spinner mejorada.

Toasts

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

Tooltips

Crítico Se cambió el nombre de .arrow a .tooltip-arrow en nuestra plantilla de tooltip predeterminada.
Crítico El valor predeterminado para fallbackPlacements se cambia a ['top', 'right', 'bottom', 'left'] para una mejor ubicación de los elementos Popper.
Crítico Se cambió el nombre de la opción whiteList a allowList.

Utilidades

Crítico Se cambiaron de nombre varias utilidades para usar nombres de propiedades lógicas en lugar de nombres direccionales con la adición de soporte RTL:
- Se cambió el nombre de .float-left y .float-right a .float-start y .float-end.
- Se cambió el nombre de .border-left y .border-right a .border-start y .border-end.
- Se cambió el nombre de .rounded-left y .rounded-right a .rounded-start y .rounded-end.
- Se cambió el nombre de .ml-* y .mr-* a .ms-* y .me-*.
- Se cambió el nombre de .pl-* y .pr-* a .ps-* y .pe-*.
- Se cambió el nombre de .text-*-left y .text-*-right a .text-*-start y .text-*-end.
Crítico Se deshabilitaron los márgenes negativos de forma predeterminada.
Se agregó la nueva clase .bg-body para configurar rápidamente el fondo del <body> en elementos adicionales.
Se agregaron nuevas utilidades de posición para top, right, bottom y left. Los valores incluyen 0, 50% y 100% para cada propiedad.
Se agregaron nuevas utilidades .translate-middle-x y .translate-middle-y para centrar horizontal o verticalmente elementos posicionados de forma absoluta/fija.
Se agregaron nuevas utilidades de border-width.
Crítico Se cambió el nombre de .text-monospace a .font-monospace.
Crítico Se eliminó .text-hide ya que es un método obsoleto para ocultar texto que ya no debería usarse.
Se agregaron utilidades .fs-* para utilidades de font-size (con RFS habilitado). Estos usan la misma escala que los encabezados predeterminados de HTML (1-6, de grande a pequeño) y se pueden modificar mediante el mapa Sass.
Crítico Se cambiaron de nombre las utilidades .font-weight-* a .fw-* para abreviar y mantener la coherencia.
Crítico Se cambió el nombre de la utilidad .font-italic a .fst-italic para abreviar y mantener la coherencia con la nueva utilidad .fst-normal.
Se agregó .d-grid a las utilidades de visualización y nuevas utilidades de espacio (.gap) para diseños CSS Grid y flexbox.
Crítico Se eliminaron .rounded-sm y .rounded-lg, y se introdujo una nueva escala de clases, .rounded-0 a .rounded-3. Ver #31687.
Se agregaron nuevas utilidades de line-height: .lh-1, .lh-sm, .lh-base y .lh-lg. Consulta aquí.
Se movió la utilidad .d-none en nuestro CSS para darle más peso sobre otras utilidades de visualización.
Se amplió el ayudante .visually-hidden-focusable para que también funcione en contenedores, utilizando :focus-within.

Ayundantes (Helpers)

Crítico Los ayudantes de inserción responsivos han pasado a llamarse ayudantes de proporción (ratio) con nuevos nombres de clase y comportamientos mejorados, así como una útil variable CSS.
- Se han cambiado de nombre las clases para cambiar by por x en la relación de aspecto. Por ejemplo, .ratio-16by9 ahora es .ratio-16x9.
- Hemos descartado el selector de grupo de elementos y .embed-responsive-item en favor de un selector .ratio > * más simple. No se necesita más clase y el ayudante de proporción ahora funciona con cualquier HTML elemento.
- El mapa Sass $embed-responsive-aspect-ratios ha pasado a llamarse $aspect-ratios y sus valores se han simplificado para incluir el nombre de la clase y el porcentaje como el par key: value.
- Ahora se generan e incluyen variables CSS para cada valor en el mapa Sass. Modifica la variable --bs-aspect-ratio en el .ratio para crear cualquier relación de aspecto personalizada.
Crítico Las clases "Lector de pantalla" ahora son "clases visualmente ocultas".
- Se cambió el archivo Sass de scss/helpers/_screenreaders.scss a scss/helpers/_visually-hidden.scss
- Se cambió el nombre de .sr-only y .sr-only-focusable a .visually-hidden y .visually-hidden-focusable
- Se cambió el nombre de los mixins sr-only() y sr-only-focusable() a visually-hidden() y visually-hidden-focusable().
bootstrap-utilities.css ahora también incluye nuestros ayudantes. Ya no es necesario importar ayudantes en compilaciones personalizadas.

JavaScript

Se eliminó la dependencia de jQuery y se reescribieron los complementos para que estuvieran en JavaScript normal.
Crítico Los atributos de datos para todos los complementos de JavaScript ahora tienen espacios de nombres para ayudar a distinguir la funcionalidad de Bootstrap de la de terceros y de su propio código. Por ejemplo, usamos data-bs-toggle en lugar de data-toggle.
Todos los complementos 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 complemento:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfig se puede pasar 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. Se aplica a dropdowns, popovers y tooltips.
El valor predeterminado para fallbackPlacements se cambia a ['top', 'right', 'bottom', 'left'] para una mejor ubicación de los elementos Popper. Se 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, y su funcionalidad ahora está integrada en complementos individuales. Si anteriormente incluías util.js manualmente, puedes eliminarlo de forma segura, ya que ya no es necesario. Cada complemento ahora contiene solo las utilidades que requiere, lo que mejora la modularidad y reduce las dependencias.

Migración a v5 (Migrating to v5)

¿Te gustó esta traducción?

v5.3.6

Dependencias

v5.3.0

Ayudantes (Helpers)

Utilidades

v5.3.0-alpha2

Variables CSS

Modos de color

Tipografía

Componentes

Ayudantes (Helpers)

Utilidades

Documentación (Docs)

Herramientas (Tooling)

v5.3.0-alpha1

¡Modos de color!

Variables CSS

Componentes

Alerta (Alert)

Grupo de lista (List group)

Menús desplegables (Dropdowns)

Botón de cierre (Close button)

Barra de navegación (Navbar)

Barras de progreso (Progress bars)

Formularios

Utilidades

v5.2.0

Diseño renovado

Más variables CSS

Nuevo _maps.scss

Nuevas utilidades

Cambios adicionales

v5.1.0

v5.0.0

Dependencias

Soporte de navegadores

Cambios en la documentación

Sass

Sistema de color

Actualizaciones de cuadrícula (Grid updates)

Contenido, Reboot, etc.

RTL

Formularios

Componentes

Acordeón (Accordion)

Alertas (Alerts)

Insignias (Badges)

Migas de pan (Breadcrumbs)

Botones (Buttons)

Tarjetas (Card)

Carrusel (Carousel)

Botón de cierre (Close button)

Colapso (Collapse)

Menús desplegables (Dropdowns)

Jumbotron

Grupo de lista (List group)

Navs y pestañas (Navs and tabs)

Barras de navegación (Navbars)

Offcanvas

Paginación (Pagination)

Popovers

Spinners

Toasts

Tooltips

Utilidades

Ayundantes (Helpers)

JavaScript

Nuevo `_maps.scss`