Después de haber estudiado las distintas versiones de Bootstrap y comprendido la importancia de aprender a diseñar páginas web mediante este framework, vamos a ver ahora las diferencias más destacadas entre las versiones más populares actualmente: Bootstrap 4 y Bootstrap 5.
4. Diferencias entre Bootstrap 4 y Bootstrap 5
Veamos los cambios más destacados entre las dos últimas versiones de Bootstrap, por ser las más utilizadas:
| Diferencias | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| Tamaño | Menos ligero | Carga más rápida |
| Documentación | Disponible | Disponible, actualizada y mejorada |
| Columnas | 5 niveles (xs, sm, md, lg, xl) | 6 niveles (xs, sm, md, lg, xl, xxl) |
| Colores | Colores limitados | Colores adicionales con una paleta de colores mejorada |
| Jquery | Tiene Jquery | Jquery se elimina y se cambia a Vanilla JS |
| Internet Explorer | Compatible con IE 10 y 11 | No compatible con IE 10 y 11 |
| Formularios | Los botones de opción y las casillas de verificación tienen un aspecto distinto en diferentes navegadores | El aspecto de los elementos del formulario no cambia en los diferentes navegadores |
| Iconos | No tiene sus propios iconos SVG | Tiene sus propios iconos SVG |
| Jumbotron | Soporta | No soporta Jumbotron |
| Card deck | Card deck se utiliza para crear tarjetas con el mismo ancho y alto | Card deck ha sido eliminado |
| Navbar | Tenemos la propiedad inline-block y obtendremos el menú desplegable blanco como predeterminado para la clase dropdown-menu-dark | Se elimina la propiedad inline-block y obtendremos el menú desplegable negro como predeterminado para la clase dropdown-menu-dark |
| Generador de sitio estático | Utiliza el software Jekyll | Utiliza el software Hugo |
4.1. Clases que cambian o que se renombran de Bootstrap 4 a Bootstrap 5
Conocer las clases que cambian o que se renombran de Bootstrap 4 a Bootstrap 5 es fundamental para mantener la compatibilidad y actualizar con éxito proyectos existentes. Esto asegura que el diseño y funcionalidad sigan siendo consistentes y óptimos. Además, te permite aprovechar las nuevas características y mejoras introducidas en Bootstrap 5 para mejorar la experiencia del usuario y la eficiencia en el desarrollo web.
Veamos algunas clases que cambian o que han sido renombradas en Bootstrap 5 con respecto a Bootstrap 4.
| Bootstrap 4 | Bootstrap 5 |
|---|---|
| .left-* | .start-* |
| .right-* | .end-* |
| .float-left | .float-start |
| .float-right | .float-end |
| .border-left | .border-start |
| .border-right | .border-end |
| .rounded-left | .rounded-start |
| .rounded-right | .rounded-end |
| .ml-* | .ms-* |
| .mr-* | .me-* |
| .pl-* | .ps-* |
| .pr-* | .pe-* |
| .text-left | .text-start |
| .text-right | .text-end |
| .text-monospace | .font-monospace |
| .text-hide | Ya no se usa |
| .font-style-* | .fst-* |
| .rounded-sm → .rounded-lg | .rounded-0 → .rounded-3 |
| .btn-block | Ya no se usa |
| .jumbotron | Ya no se usa (se utilizaba para crear un call to action) |
En la siguiente sección del tutorial aprenderemos cómo descargar e instalar Bootstrap 5 mediante las dos formas más populares: con CDN (Content Delivery Network) y con descarga de código en local.