BootStrap 4 ¿Cómo funciona la última versión?

Bootstrap 4 es la última versión de Bootstrap, el framework de CSS, HTML y JavaScript más conocido, que nos permite desarrollar webs que se ajustan a cualquier resolución y dispositivo.

Veamos cuáles son las mejoras de esta herramienta para frontend y si realmente merece la pena contar con ellas.

Mejoras de BootStrap 4

La verdad es que si quieres evolucionar y pasarte a la versión 4, es necesario eliminar el soporte para Internet 9, porque esta versión de IE ha dejado de ser compatible con la última actualización de BootStrap.

Si por el contrario te cuesta deshacerte de él, deberás seguir con la versión BootStrap 3.3.7. Pero cuenta con que Internet Explorer 9 tiene ya casi 8 años, los suficientes como replantearte actualizar a IE 10 o iOS 7 y pasar definitivamente a la versión BootStrap 4.

Sin duda son bastantes los cambios y mejoras. Te contamos los más importantes.

Grids

En este caso, se ha incorporado un nuevo break point para resoluciones extra-largas y algunos se han cambiado. Hasta el momento, y con la versión anterior, la resolución tenía 768 px. Tengamos en cuenta que una gran cantidad de resoluciones proceden de pantallas más estrechas, tarea que con la versión anterior se convertía en algo  bastante frustrante de conseguir para los desarrolladores.

Ahora, al añadirse un break point xl, las resoluciones quedan así,

• col-{N}para las resoluciones más pequeñas (pierde el xs)
• col-sm-{N}para dispositivos pequeños (smartphones o móviles) >= 576px.
• col-md-{N}para dispositivos medianos (tabletas) >= 768px.
• col-lg-{N}para dispositivos grandes (portátiles, etc.) >= 992px.
• col-xl-{N}para dispositivos muy grandes (pantallas externas, etc.) >= 1200px

Además con V4, el sistema de columnas se basa en Flexbox (es decir, el modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos).

Este sistema ofrece mayor flexibilidad y más opciones, como la redimensión de manera automática.

También es posible decidir la posición de cada columna en base a la resolución. En lugar de trabajar con offsets y pulls como con la versión anterior, ahora solo basta especificar la posición directamente con las clases order-{N}.

Barra de navegación

Con esta última versión 4 del framework tenemos la posibilidad de controlar la distribución y el tamaño de los elementos que la componen.

Aquí en la barra de navegación hay un botón que la despliega y a partir de ahí la resolución se expande.

Las nuevas clases son navbar-expand-* para cada breakpoint.

Si por el contrario te cuesta deshacerte de él, deberás seguir con la versión BootStrap 3.3.7. Pero cuenta con que Internet Explorer 9 tiene ya casi 8 años, los suficientes como replantearte actualizar a IE 10 o iOS 7 y pasar definitivamente a la versión BootStrap 4.

Paneles, Wells y Thumbnails

Estos tres elementos se sustituyen en BootStrap 4 por uno basado en flexbox que se llama Cards.

Son nuevas clases que permiten que estructuremos el contenido de las mismas.

Ejemplos clases CSS

• .card
• .card-body
• .custom-file
• .card-text
• …

Formularios

Poder establecer un estilo diferente al que marca el navegador a determinados elementos es complicado. A partir de la nueva versión 4 es mucho más fácil otorgar un estilo a los radios, checkboxes o file imputs.

Ejemplos clases CSS

• .form-checks
• .custom-checkboxs
• .custom-radios
• .custom-file

Otras utilidades y apariencia visual

La v4 presenta una nueva interfaz. Por ejemplo, con nuevos botones, que han cambiado respecto a la versión anterior.

Versión 3:

Y estos son los nuevos botones de BootStrap 4

En cuanto a utilidades, podemos comprobar que se han añadido nuevas clases para las tareas más frecuentes.

Por ejemplo, v4 es capaz de controlar el color, anchura y radio de los bordes de los elementos de forma muy rápida.

Además, hay un nuevo listado de clases para los márgenes que permite añadir de forma inmediata un margen.

A la hora de alienar un texto se puede personalizar la resolución. Se amplían las clases text-left, text-right… Ahora también tenemos text-sm-left, text-lg-right.

En definitiva, BootStrap 4 permite llevar a cabo cambios y funcionalidades importantes en el desarrollo de cualquier proyecto.

Si nos preguntas si merece la pena cambiar a esta nueva versión, rotundamente te diremos que SÍ. En nuestro caso no nos lo hemos pensado. Empezamos de cero numerosos proyectos y mantenemos vivas muchas webs, por lo que aprender, “bichear” y poner en práctica nuevas funcionalidades forma parte de nuestro día a día.