Saltar al contenido principal Saltar a la navegación de la documentación
¡Hay una versión más nueva de Bootstrap!
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

Dependencias

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

Soporte de navegadores

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

Cambios en la documentación

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

Sass

  • Hemos eliminado las fusiones predeterminadas de Sass maps para facilitar la eliminación de valores redundantes. Ten en cuenta que ahora tienes que definir todos los valores en los Sass maps como $theme-colors. Revisa cómo manejar los Sass maps.

  • Breaking Se renombró la función color-yiq() y las variables relacionadas a color-contrast() ya que ya no está relacionada con el espacio de color YIQ. Ver #30168.

    • $yiq-contrasted-threshold se renombró a $min-contrast-ratio.
    • $yiq-text-dark y $yiq-text-light se renombraron respectivamente a $color-contrast-dark y $color-contrast-light.

  • Breaking Los parámetros de los mixins de media queries han cambiado para un enfoque más lógico.

    • media-breakpoint-down() usa el breakpoint en sí mismo en lugar del siguiente breakpoint (ej., media-breakpoint-down(lg) en lugar de media-breakpoint-down(md) apunta a viewports más pequeños que lg).
    • De manera similar, el segundo parámetro en media-breakpoint-between() también usa el breakpoint en sí mismo en lugar del siguiente breakpoint (ej., media-between(sm, lg) en lugar de media-breakpoint-between(sm, md) apunta a viewports entre sm y lg).

  • Breaking Se eliminaron los estilos de impresión y la variable $enable-print-styles. Las clases de display para impresión siguen disponibles. Ver #28339.

  • Breaking Se eliminaron las funciones color(), theme-color() y gray() en favor de variables. Ver #29083.

  • Breaking Se renombró la función theme-color-level() a color-level() y ahora acepta cualquier color que desees en lugar de solo los colores de $theme-color. Ver #29083 Cuidado: color-level() fue posteriormente eliminada en v5.0.0-alpha3.

  • Breaking Se renombraron $enable-prefers-reduced-motion-media-query y $enable-pointer-cursor-for-buttons a $enable-reduced-motion y $enable-button-pointers por brevedad.

  • Breaking Se eliminó el mixin bg-gradient-variant(). Usa la clase .bg-gradient para añadir gradientes a los elementos en lugar de las clases generadas .bg-gradient-*.

  • Breaking Removed previously deprecated mixins:

    • hover, hover-focus, plain-hover-focus y hover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide() (también se eliminó la clase utilitaria asociada, .text-hide)
    • visibility()
    • form-control-focus()

  • Breaking Se renombró la función scale-color() a shift-color() para evitar colisión con la propia función de escalado de color de Sass.

  • Los mixins de box-shadow ahora permiten valores null y eliminan none de múltiples argumentos. Ver #30394.

  • El mixin border-radius() ahora tiene un valor predeterminado.

Sistema de colores

  • El sistema de colores que funcionaba con color-level() y $theme-color-interval se eliminó en favor de un nuevo sistema de colores. Todas las funciones lighten() y darken() en nuestro código base se reemplazaron por tint-color() y shade-color(). Estas funciones mezclarán el color con blanco o negro en lugar de cambiar su luminosidad en una cantidad fija. shift-color() teñirá o sombreará un color dependiendo de si su parámetro de peso es positivo o negativo. Ver #30622 para más detalles.

  • Se añadieron nuevos tintes y sombras para cada color, proporcionando nueve colores separados para cada color base, como nuevas variables de Sass.

  • Mejor contraste de color. Se aumentó la relación de contraste de color de 3:1 a 4.5:1 y se actualizaron los colores azul, verde, cian y rosa para garantizar el contraste WCAG 2.1 AA. También se cambió nuestro color de contraste de $gray-900 a $black.

  • Para soportar nuestro sistema de colores, hemos añadido nuevas funciones personalizadas tint-color() y shade-color() para mezclar nuestros colores adecuadamente.

Actualizaciones del grid

  • ¡Nuevo breakpoint! Se añadió el nuevo breakpoint xxl para 1400px y superior. Sin cambios en los demás breakpoints.

  • Gutters mejorados. Los gutters ahora se establecen en rems, y son más estrechos que en v4 (1.5rem, o aproximadamente 24px, frente a los 30px anteriores). Esto alinea los gutters de nuestro sistema de grid con nuestras utilidades de espaciado.

    • Se añadió una nueva clase de gutter (.g-*, .gx-* y .gy-*) para controlar gutters horizontales/verticales, gutters horizontales y gutters verticales.
    • Breaking Se renombró .no-gutters a .g-0 para coincidir con las nuevas utilidades de gutter.

  • Las columnas ya no tienen position: relative aplicado, por lo que puede que tengas que añadir .position-relative a algunos elementos para restaurar ese comportamiento.

  • Breaking Se eliminaron varias clases .order-* que solían no usarse. Ahora solo proporcionamos .order-1 a .order-5 por defecto.

  • Breaking Se eliminó el componente .media ya que puede replicarse fácilmente con utilidades. Ver #28265 y la página de utilidades flex para un ejemplo.

  • Breaking bootstrap-grid.css ahora solo aplica box-sizing: border-box a la columna en lugar de resetear el box-sizing global. De esta manera, nuestros estilos de grid pueden usarse en más lugares sin interferencias.

  • $enable-grid-classes ya no deshabilita la generación de clases de contenedor. Ver #29146.

  • Se actualizó el mixin make-col para que por defecto genere columnas iguales sin un tamaño especificado.

Contenido, Reboot, etc

  • RFS ahora está habilitado por defecto. Los encabezados que usan el mixin font-size() ajustarán automáticamente su font-size para escalar con el viewport. Esta función antes era opcional en v4.

  • Breaking Se revisó por completo nuestra tipografía de display para reemplazar nuestras variables $display-* con un Sass map $display-font-sizes. También se eliminaron las variables individuales $display-*-weight por una sola $display-font-weight y se ajustaron los font-size.

  • Se añadieron dos nuevos tamaños de encabezado .display-*, .display-5 y .display-6.

  • Los enlaces están subrayados por defecto (no solo en hover), a menos que sean parte de componentes específicos.

  • Se rediseñaron las tablas para refrescar sus estilos y reconstruirlas con variables CSS para mayor control sobre el estilo.

  • Breaking Las tablas anidadas ya no heredan estilos.

  • Breaking Se eliminaron .thead-light y .thead-dark en favor de las clases de variantes .table-* que pueden usarse para todos los elementos de la tabla (thead, tbody, tfoot, tr, th y td).

  • Breaking El mixin table-row-variant() se renombró a table-variant() y acepta solo 2 parámetros: $color (nombre del color) y $value (código de color). El color del borde y los colores de acento se calculan automáticamente basándose en las variables factor de la tabla.

  • Se dividieron las variables de padding de celdas de tabla en -y y -x.

  • Breaking Se eliminó la clase .pre-scrollable. Ver #29135

  • Breaking Las utilidades .text-* ya no añaden estados hover y focus a los enlaces. Las clases helper .link-* pueden usarse en su lugar. Ver #29267

  • Breaking Se eliminó la clase .text-justify. Ver #29793

  • 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-check ahora es .form-check.
    • .custom-check.custom-switch ahora es .form-check.form-switch.
    • .custom-select ahora es .form-select.
    • .custom-file y .form-file se reemplazaron por estilos personalizados sobre .form-control.
    • .custom-range ahora es .form-range.
    • Se eliminaron .form-control-file y .form-control-range nativos.

  • Breaking Se eliminaron .input-group-append y .input-group-prepend. Ahora puedes simplemente añadir botones y .input-group-text como hijos directos de los input groups.

  • El antiguo bug de radio de borde faltante en input group con feedback de validación finalmente se solucionó añadiendo una clase adicional .has-validation a los input groups con validación.

  • Breaking Se eliminaron las clases de layout específicas de formularios para nuestro sistema de grid. Usa nuestro grid y utilidades en lugar de .form-group, .form-row o .form-inline.

  • Breaking Las etiquetas de formulario ahora requieren .form-label.

  • Breaking .form-text ya no establece display, permitiéndote crear texto de ayuda inline o en bloque como desees simplemente cambiando el elemento HTML.

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

Accordion

Alerts

  • Las alerts ahora tienen ejemplos con iconos.

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

Badges

  • Breaking Se eliminaron todas las clases de color .badge-* en favor de utilidades de fondo (ej., usa .bg-primary en lugar de .badge-primary).

  • Breaking Se eliminó .badge-pill: usa la utilidad .rounded-pill en su lugar.

  • Breaking Se eliminaron los estilos hover y focus para los elementos <a> y <button>.

  • Se aumentó el padding predeterminado de los badges de .25em/.5em a .35em/.65em.

  • Se simplificó la apariencia predeterminada de los breadcrumbs eliminando padding, background-color y border-radius.

  • Se añadió la nueva propiedad personalizada CSS --bs-breadcrumb-divider para una personalización fácil sin necesidad de recompilar CSS.

Botones

  • Breaking Toggle buttons, con checkboxes o radios, ya no requieren JavaScript y tienen nuevo markup. Ya no requerimos un elemento contenedor, añade .btn-check al <input> y acompáñalo con cualquier clase .btn en el <label>. Ver #30650. La documentación de esto se ha movido de nuestra página de Buttons a la nueva sección de Forms.

  • Breaking Se eliminó .btn-block en favor de utilidades. En lugar de usar .btn-block en el .btn, envuelve tus botones con .d-grid y una utilidad .gap-* para espaciarlos según sea necesario. Cambia a clases responsivas para aún más control sobre ellos. Lee la documentación para algunos ejemplos.

  • Se actualizaron nuestros mixins button-variant() y button-outline-variant() para soportar parámetros adicionales.

  • Se actualizaron los botones para garantizar un mayor contraste en los estados hover y active.

  • Los botones deshabilitados ahora tienen pointer-events: none;.

Card

  • Breaking Se eliminó .card-deck en favor de nuestro grid. Envuelve tus cards en clases de columna y añade un contenedor .row-cols-* padre para recrear card decks (pero con más control sobre la alineación responsiva).

  • Breaking Se eliminó .card-columns en favor de Masonry. Ver #28922.

  • Breaking Se reemplazó el accordion basado en .card con un nuevo componente Accordion.

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

Close button

  • Breaking Se renombró .close a .btn-close por un nombre menos genérico.

  • Los close buttons ahora usan una background-image (SVG incrustado) en lugar de un × en el HTML, lo que permite una personalización más fácil sin necesidad de tocar tu markup.

  • Se añadió la nueva variante .btn-close-white que usa filter: invert(1) para habilitar iconos de cierre con mayor contraste sobre fondos más oscuros.

Collapse

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

  • 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 dropdown ahora tienen el atributo data-bs-popper="static" establecido cuando el posicionamiento del dropdown es estático y data-bs-popper="none" cuando el dropdown está en el navbar. Esto lo añade 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

List group

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

Offcanvas

Pagination

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

  • Se añadieron transitiones a los enlaces de pagination.

Popovers

  • Breaking Se renombró .arrow a .popover-arrow en nuestra plantilla predeterminada de popover.

  • Se renombró la opción whiteList a allowList.

Spinners

  • Los spinners ahora respetan prefers-reduced-motion: reduce ralentizando las animaciones. Ver #31882.

  • Se mejoró la alineación vertical de los spinners.

Toasts

  • Los toasts ahora pueden ser posicionados en un .toast-container con la ayuda de utilidades de posicionamiento.

  • Se cambió la duración predeterminada de los toasts a 5 segundos.

  • Se eliminó overflow: hidden de los toasts y se reemplazó con border-radius adecuados con funciones calc().

Tooltips

  • Breaking Se renombró .arrow a .tooltip-arrow en nuestra plantilla predeterminada de tooltip.

  • Breaking El valor predeterminado de fallbackPlacements se cambió a ['top', 'right', 'bottom', 'left'] para mejor posicionamiento de los elementos popper.

  • Breaking Se renombró la opción whiteList a allowList.

Utilidades

  • Breaking Se renombraron varias utilidades para usar nombres de propiedades lógicas en lugar de nombres direccionales con la adición de soporte RTL:

    • Se renombró .left-* y .right-* a .start-* y .end-*.
    • Se renombró .float-left y .float-right a .float-start y .float-end.
    • Se renombró .border-left y .border-right a .border-start y .border-end.
    • Se renombró .rounded-left y .rounded-right a .rounded-start y .rounded-end.
    • Se renombró .ml-* y .mr-* a .ms-* y .me-*.
    • Se renombró .pl-* y .pr-* a .ps-* y .pe-*.
    • Se renombró .text-left y .text-right a .text-start y .text-end.

  • Breaking Se deshabilitaron los márgenes negativos por defecto.

  • Se añadió la nueva clase .bg-body para establecer rápidamente el fondo del <body> en elementos adicionales.

  • Se añadieron nuevas utilidades de position para top, right, bottom y left. Los valores incluyen 0, 50% y 100% para cada propiedad.

  • Se añadieron las nuevas utilidades .translate-middle-x y .translate-middle-y para centrar horizontal o verticalmente elementos con posicionamiento absoluto/fijo.

  • Se añadieron nuevas utilidades de border-width.

  • Breaking Se renombró .text-monospace a .font-monospace.

  • Breaking Se eliminó .text-hide ya que es un método anticuado para ocultar texto que no debería usarse más.

  • Se añadieron utilidades .fs-* para utilidades de font-size (con RFS habilitado). Estas usan la misma escala que los encabezados predeterminados de HTML (1-6, grande a pequeño), y pueden modificarse vía Sass map.

  • Breaking Se renombraron las utilidades .font-weight-* como .fw-* por brevedad y consistencia.

  • Breaking Se renombraron las utilidades .font-style-* como .fst-* por brevedad y consistencia.

  • Se añadió .d-grid a las utilidades de display y nuevas utilidades de gap (.gap) para layouts de CSS Grid y flexbox.

  • Breaking Se eliminaron .rounded-sm y rounded-lg, y se introdujo una nueva escala de clases, .rounded-0 a .rounded-3. Ver #31687.

  • Se añadieron nuevas utilidades de line-height: .lh-1, .lh-sm, .lh-base y .lh-lg. Ver aquí.

  • Se movió la utilidad .d-none en nuestro CSS para darle más peso sobre otras utilidades de display.

  • Se extendió el helper .visually-hidden-focusable para que también funcione en contenedores, usando :focus-within.

Helpers

  • Breaking Los helpers de embed responsivo se han renombrado a helpers de ratio con nuevos nombres de clase y comportamientos mejorados, así como una útil variable CSS.

    • Las clases se han renombrado cambiando by por x en el aspect ratio. Por ejemplo, .ratio-16by9 ahora es .ratio-16x9.
    • Hemos eliminado .embed-responsive-item y el selector de grupo de elementos en favor de un selector más simple .ratio > *. Ya no se necesita ninguna clase, y el helper de ratio ahora funciona con cualquier elemento HTML.
    • El Sass map $embed-responsive-aspect-ratios se ha renombrado a $aspect-ratios y sus valores se han simplificado para incluir el nombre de clase y el porcentaje como el par key: value.
    • Las variables CSS ahora se generan e incluyen para cada valor en el Sass map. Modifica la variable --bs-aspect-ratio en el .ratio para crear cualquier aspect ratio personalizado.

  • Breaking “Screen reader” classes are now clases “visualmente ocultas”.

    • Se cambió el archivo Sass de scss/helpers/_screenreaders.scss a scss/helpers/_visually-hidden.scss
    • Se renombró .sr-only y .sr-only-focusable a .visually-hidden y .visually-hidden-focusable
    • Se renombraron los mixins sr-only() y sr-only-focusable() a visually-hidden() y visually-hidden-focusable().

  • bootstrap-utilities.css ahora también incluye nuestros helpers. Los helpers ya no necesitan importarse en builds personalizados.

JavaScript

  • Se eliminó la dependencia de jQuery y se reescribieron los plugins en JavaScript normal.

  • Breaking Los atributos data de todos los plugins de JavaScript ahora tienen un namespace para ayudar a distinguir la funcionalidad de Bootstrap de terceros y de tu propio código. Por ejemplo, usamos data-bs-toggle en lugar de data-toggle.

  • Todos los plugins ahora pueden aceptar un selector CSS como primer argumento. Puedes pasar un elemento DOM o cualquier selector CSS válido para crear una nueva instancia del plugin:

    var modal = new bootstrap.Modal('#myModal')
var 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().

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