Sistema de columnas y contenedores o rejillas de Bootstrap 4

Bootstrap permite diseñar las páginas mediante un sistema de columnas o rejillas que nos ayudan en la disposición del contenido y su adaptación a los diferentes dispositivos.

Este sistema, creado con flexbox, consiste en dividir la pantalla en filas, donde cada fila puede dividirse en 12 columnas o espacios (también permite diseños de más columnas, pero como base se tiene en cuenta una división estándar de 12 columnas). De esta forma podemos, por ejemplo, crear un diseño con dos columnas, una que ocupe 5 espacios y otra que ocupe 7 espacios, tal y como se muestra a continuación:

  <div class="container">
     <div class="row">
      <div class="col-5">Contenedor de 5 columnnas</div>
      <div class="col-7">Contenedor de 7 columnna</div>
    </div>
  </div>

1. Contenedores o rejillas de Bootstrap

El sistema de contenedores o rejillas de Bootstrap se basa en contenedores flexibles que se escalan dependiendo del tamaño del dispositivo. Para ajustar los contenedores o rejillas disponemos de diferentes clases:

.container: el contenido aparece centrado y con un ancho fijo.

<div class="container">
     ...
</div>

.container-fluid: el contenido ocupa todo el ancho disponible (100%).

<div class="container-fluid">
  ...
</div>

Por lo tanto, lo primero que necesitamos para comenzar es definir un contenedor principal con la clase .container o .container-fluid que recoja nuestra página: filas y columnas.

Dentro de este container vamos a crear filas “row” y dentro de ellas, las columnas “col”. A continuación creamos un contenedor y una fila que contiene tres columnas:

<div class="container">
  <div class="row">
    <div class="col">
      Primera de tres columnas
    </div>
    <div class="col">
      Segunda de tres columnas
    </div>
    <div class="col">
      Tercera de tres columnas
    </div>
  </div>
</div>

También podríamos hacerlo usando las clases col-xx, donde xx es el tamaño de la columna (como máximo 12 columnas en una fila):

<div class="container">
  <div class="row">
    <div class="col-4">
      Primera de tres columnas
    </div>
    <div class="col-4">
      Segunda de tres columnas
    </div>
    <div class="col-4">
      Tercera de tres columnas
    </div>
  </div>
</div>

Ejemplo

2. Consideraciones a tener en cuenta para trabajar con rejillas

Funcionamiento de las rejillas utilizando las clases de tipo col-xx:

• Cada fila se puede dividir hasta un máximo de 12 columnas. Sin embargo, utilizando la clase col (sin valor) se pueden incluir todas las columnas que uno quiera.
• Si el tamaño total de las columnas de una fila excede de 12, el sobrante se colocará en la siguiente fila.
• El tamaño de las columnas se especificará con clases CSS que Bootstrap define para cada tamaño de pantalla, por ejemplo .col-md-XX donde XX es el tamaño de la columna, que podrá tomar valores entre 1 y 12.
• Al especificar la clase del tamaño de las columnas (ejemplo: .col-md-XX) no sólo se aplica al tamaño definido, sino que para los superiores también. Para los valores inferiores cada columna ocupará el ancho total del contenedor padre.

En la siguiente tabla se recoge un resumen del funcionamiento de la rejilla de Bootstrap dependiendo del tamaño de la pantalla:

Ejemplo

Como es de esperar, también podemos especificar qué ancho definir para cada tipo de resolución indicando en cada elemento diferentes clases. Por ejemplo podemos especificar distintos tamaños de columna para xl, md y sm, tal y como se muestra en el siguiente ejemplo:

 <div class="row">
    <div class="col-xl-6 col-md-5 col-sm-4">prueba</div>
    <div class="col-xl-6 col-md-5 col-sm-4">prueba</div>
  </div>

Ejemplo

Ejemplo

3. Ocultación de contenido

Bootstrap ofrece la clase .d-none para ocultar contenido para todas las pantallas o .d-{sm,md,lg,xl}-none si queremos que se oculte en alguna resolución en concreto.

Para mostrar sólo los elementos en una resolución concreta se deberá especificar la clase .d-XX-block. Por ejemplo, con la clase .d-md-block se ocultaría el contenedor en todas las resoluciones menos en la intermedia.

Ejemplo

Comprueba tu apendizaje