Es muy importante entender como funciona el sistema de rejillas en bootsrap 4 y para ello tenemos que entender que tenemos filas y columnas.

Por defecto las filas se marcan como <div class=»row»>contenido</div> y dentro de las filas se van insertando las columnas. Por defecto cada fila tiene 12 columnas de ese modo podemos hacer una fila con una columna de 6 espacios y 2 de 3, una fila con una columna que ocupa todo el espacio…

Cómo veremos, las filas y las columnas se pueden anidar, creando casi cualquier estructura que necesitemos, de hecho bootstrap puede identificar el tamaño de ventana donde se muestra y mostrar diferentes estructuras según nuestras necesidades, ayudándonos de una manera enorme en el responsive y en el diseño.

Para entender esto vamos a ver los diferentes tamaños de pantalla y con que ancho de pantalla se corresponden.

Para entender un poco como funciona el sistema de columnas veamos los siguientes ejemplos con los nombres de clase:

De este modo en cada columna podemos introducir el contenido que queremos, en el ejemplo de arriba la distribución sería para pantallas de entre 767 a 971 pixeles de ancho.

Si nos fijamos la suma de los valores en cada fila es de 12, indicando en cada columna cuantos espacios debe de ocupar, por lo que las posibilidades en nuestros diseños son enormes.

Veamos un ejemplo: (los colores de las columnas los he puesto yo por medio de css)

<div class="container">
    <div class="row">
        <div class="col-lg-3">3 espacios</div>
        <div class="col-lg-2">2 espacios</div>
        <div class="col-lg-5">5 espacios</div>
        <div class="col-lg-2">2 espacios</div>
    </div>
</div>

Esto nos daría el siguiente resultado:

Se puede evitar usar el tipo de pantalla y usar solamente col-x (donde x es el número de espacios) para que las columnas sean las mismas en todos los tipos de pantalla, pero la verdad es que no se suele usar este tipo de grid y lo que utilizamos de forma más habitual es es introduciendo el tipo de pantalla como en el ejemplo.

De este modo podemos hacer lo siguiente:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-lg-3"></div>
        <div class="col-md-3 col-lg-2"></div>
        <div class="col-md-3 col-lg-5"></div>
        <div class="col-md-3 col-lg-2"></div>
    </div>
</div>

Donde vemos que si la pantalla está entre los 767 y los 971 pixeles cambia a la siguiente estructura:

Como se puede ver las columnas cambian su tamaño a dos espacios cada una. Es más debido a la filosofía del móvil primero cuando la  pantalla llega al tamaño de móvil pone todos elementos en 12 columnas apareciendo unos debajo de otros.

Contenedores

En el ejemplo de arriba hemos visto como hay  una etiqueta div que tiene la clase container, esta es la clase contenedora, que puede estar en un div o en cualquier etiqueta de html5 que haga referencia a cajas, como main, article, aside, footer…

De este modo el contenedor puede ser de dos formas:

• container: que es una caja centrada en el centro de la pantalla de forma estática, es decir la caja siempre tiene el mismo ancho y no tenemos que preocuparnos por los porcentajes de imágenes, vídeos…
• container-fluid: para poner el contenido a todo lo ancho de la pantalla de forma flexible, por  lo que tenemos que tener en cuenta los tamaños y porcentajes en todos los elementos.

Utilizando y mezclando el grid y los contenedores podemos comenzar a tener resultados muy atractivos de forma rápida, reduciendo de forma muy significativa nuestros archivos css al no tener que hacer mediaquerys muy grandes.

Espero que os haya servido, si tenéis dudas podéis dejarla en comentarios, y si queréis podéis compartir el artículo.