Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=a62c24d6-26fd-4c79-8918-04f0e2fdbaa8

Bootstrap 4.4: nuevos contenedores fluidos y filas automáticas de columnas fijas

Imagen ornamental con el logo de Bootstrap

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):

Las celdas resultantes

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:

Las celdas resultantes

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:

Las celdas resultantes

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!

José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.