Hace un par de días, Boostrap lanzó su versión 4.4.
La mayor parte de lo que trae son arreglos de bugs y pequeñas cosas, pero tiene dos cuestiones nuevas muy interesantes que explico a continuación...
Nuevas clases .container-{tamaño}
Hasta ahora, como sabes si dominas Bootstrap, existían dos clases para contenedores: .container y .container-fluid. La diferencia entre ellas estriba en que la primera establece un ancho máximo concreto para el contenedor según el tamaño de la página (por ejemplo, para tamaños pequeños sm es de 540px o para pantallas extra grandes lg es de 1140px) mientras que el contenedor fluido siempre establece el ancho máximo en el 100%, de modo que se adapta a la pantalla, pero puede crecer mucho en algunos casos.
Bien, en Bootstrap 4.4 añaden unas nuevas clases de contenedor a las que le podemos añadir el nombre de un ancho (sm, md, lg, xl), de modo que se comportan como un híbrido de las dos anteriores: muestran un ancho máximo del 100% hasta alcanzar la medida indicada, y luego mantienen un ancho máximo fijo.
Por ejemplo, .container-sm tendrá un ancho máximo del 100% para pantallas pequeñas (hasta 576px) y un ancho fijo de 540px para las que lo superen. Y en el otro extremo .container-xl tendrá un ancho máximo del 100% hasta el tamaño extralargo (hasta 1200px) pero limitará el ancho a 1140px a partir de esas medidas del viewport.
Esto es estupendo porque nos evita tener que estar limitando el ancho a mano en nuestras hojas de estilo si solo usamos el contenedor fluido. Obtenemos un comportamiento híbrido de los anteriores que nos permite tener contenedores fluidos limitando al mismo tiempo su ancho máximo.
Nuevas clases .row-cols-* o filas automáticas con columnas fijas
Hasta ahora para definir el número de columnas en una rejilla creada con Bootstrap 4 teníamos que establecer las clases .col-* en los elementos contenidos en filas (.row). Por ejemplo, para crear una fila con dos columnas teníamos que escribir algo como esto:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
CELDA 1
</div>
<div class="col-xs-6">
CELDA 2
</div>
</div>
</div>
A partir de Bootstrap 4.4 tenemos una nueva opción simplificada para cuando sabemos el número de celdas que queremos tener en la fila y queremos que si hay más se distribuyan equitativamente. Se trata de las clases .row-col-*, siendo * el número de columnas de 1 a 12 que queremos tener en la fila.
Por ejemplo, si queremos tener dos celdas en cada fila, podemos escribir:
<div class="container">
<div class="row row-cols-2">
<div class="col">CELDA 1</div>
<div class="col">CELDA 2</div>
<div class="col">CELDA 3</div>
<div class="col">CELDA 4</div>
</div>
</div>
y obtendríamos dos filas "virtuales" con dos columnas cada una (ya que hay cuatro celdas y le estamos indicando que queremos dos por fila):
Es decir, el div que constituye la fila es solo uno (a efectos de HTML hay solo una fila), pero se visualizan dos filas, ya que hemos indicado que sólo debe haber dos celdas por cada fila.
Fíjate en que estamos aplicando el estilo a la fila, no a la columna.
Si el número de celdas que queremos hace que queden huecos, no importa, y quedarán dichos huecos. Por ejemplo, si aplicamos a la fila anterior .row-cols-3, automáticamente se meterán 3 celdas en la primera fila y una sola en la segunda fila generada automáticamente:
Además, podemos especificar un ancho especial para cualquiera de las celdas, de modo que prevalecen sobre el tamaño por defecto especificado en la fila, y distribuye todas las demás. Por ejemplo:
<div class="container">
<div class="row row-cols-4">
<div class="col">CELDA 1</div>
<div class="col">CELDA 2</div>
<div class="col-6">CELDA 3</div>
<div class="col">CELDA 4</div>
</div>
</div>
que indica que la tercera celda siempre debe ocupar la mitad del espacio disponible, o sea, que en este caso valdrá por dos celdas ya que hay 4 según .row-cls-4 y estamos indicando que esta celda en concreto es de tipo .col-6, es decir, la mitad de una rejilla basada en 12 columnas, que es lo que usa Bootstrap. Por lo tanto lo que obtendremos en la primera fila son tres celdas, la tercera de las cuales ocupará la mitad del espacio, y una cuarta celda en la siguiente fila "virtual" para la que sobra:
Por fin, esta nueva variante de distribución de columnas permite especificar valores diferentes para distintos tamaños de viewport usando los sufijos habituales de tamaño. Así, por ejemplo, si tenemos esto:
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">CELDA 1</div>
<div class="col">CELDA 2</div>
<div class="col">CELDA 3</div>
<div class="col">CELDA 4</div>
</div>
</div>
hará que en tamaños extra pequeños haya solo una celda por cada fila, en tamaños pequeños (sm) habrá 2, en tamaños medianos (md) o posteriores habrá 4, repartiéndolas adecuadamente.
Se trata de una característica que pasa casi inadvertida pero que dota de mucha mayor comodidad y potencia a la creación de rejillas cuando queremos disponer de un número constante de celdas por fila y que se distribuyan automáticamente.
¡Espero que te parezca útil!