La rejilla de Bootstrap¶

Ahora que ya sabemos cómo incorporar Bootstrap a nuestras webs, vamos a hablar de uno de los componentes pricipales que tiene, que nos va a permitir posicionar nuestro contenido de distintas formas muy flexibles: la rejilla. En este documento explicaremos sus características principales, y los elementos de configuración más importantes que podemos emplear.

1. Consideraciones iniciales¶

Antes de comenzar con el funcionamiento de la rejilla en sí, conviene tener claros ciertos conceptos en los que se basa dicho funcionamiento, como son la configuración del elemento contenedor de la rejilla y los distintos tamaños de pantalla configurados.

1.1. El elemento contenedor¶

Para que la rejilla entre en funcionamiento debe definirse dentro de un elemento contenedor. Dicho elemento deberá tener uno de estos selectores de clase:

container: el contenedor estándar, tiene un ancho máximo (max-width) que va cambiando según el tamaño de pantalla
container-fluid: siempre ocupa el 100% del ancho visible del viewport, independientemente del tamaño de pantalla
container-{breakpoint}: ocupa el 100% del ancho visible hasta alcanzar el tamaño de pantalla indicado en {breakpoint}. Por ejemplo, container-md ocupará el 100% del ancho visible hasta tamaños md o superiores, en los que pasará a configurarse con diferentes anchuras máximas a medida que vaya aumentando el tamaño. Por lo tanto, esta opción es una mezcla de las dos anteriores.

Nota

Es también habitual anidar ambos contenedores: usar container-fluid para ocupar de inicio el 100% del ancho visible, y luego dentro container para mantener el contenido algo más acotado.

1.2. Tamaños de pantalla¶

Bootstrap admite los siguientes tamaños de pantalla predefinidos, que podremos usar en distintos selectores de clase a modo de breakpoints, puntos de ruptura donde cambia la disposición actual de los elementos.

Tamaño	Selector de clase	Dimensiones
Extra pequeño	`xs` o ninguno	<= 576px
Pequeño (small)	`sm`	>= 576px
Mediano (medium)	`md`	>= 768px
Grande (large)	`lg`	>= 992px
Extra grande	`xl`	>= 1200px
Extra extra grande	`xxl`	>= 1400px

Nota

El tamaño extra pequeño tenía el selector de clase xs en versiones anteriores de Bootstrap, pero puede omitirse a partir de Bootstrap 5.

Al usar cualquiera de estos elementos en algún selector de clase (por ejemplo, container-md), se aplicarán para ese selector y todos los superiores, salvo que luego se añada otro superior que vuelva a cambiar la configuración.

2. Funcionamiento general de la rejilla¶

Bootstrap estructura el área de contenido de la página en una de rejilla, de forma que cada pieza de contenido puede ocupar las casillas que queramos. Aquí tenemos un ejemplo, que podemos probar en el navegador y cambiar el tamaño de la ventana para ver cómo se reajusta el contenido:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h2>Columna 1</h3>
                    <p>Texto de prueba para esta primera columna.</p>
                </div>
                <div class="col-md-4">
                    <h2>Columna 2</h3>
                    <p>Texto de prueba para esta segunda columna.</p>
                    <p>Un segundo párrafo para esta columna de prueba.</p>
                </div>
                <div class="col-md-4">
                    <h2>Columna 3</h3>
                    <p>Tercera y última columna.</p>
                </div>
            </div>
        </div>
    </body>
</html>

La rejilla de Bootstrap está formada por filas de 12 casillas o columnas, como iremos viendo ahora. La apariencia que tendrá esta página en el navegador a pantalla completa será aproximadamente ésta:

Si el tamaño de pantalla se reduce por debajo del tamaño md, los elementos se dispondrán en vertical, uno debajo de otro. Para conseguir esto hemos utilizado algunos selectores de clase de los muchos que ofrece el CSS de Bootstrap, y que explicaremos a continuación.

Si no especificamos tamaño de columna, las columnas de una misma fila se distribuyen para ocupar todo el espacio:

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

2.1. Selectores principales de rejilla¶

El selector row sirve para estructurar el contenido de la página en filas, de forma que cada fila estará compuesta por una serie de columnas, y esas columnas se autoajustarán según el tamaño de la pantalla. Pondremos un selector row para cada fila que queramos añadir de contenido en nuestra página.

En cuanto a las columnas, hay diferentes estilos que empiezan por la palabra col, seguida de un tamaño (xs, sm, md, lg, xl o xxl, según hasta qué resolución queramos mantener las columnas, aunque en la versión 5 de Bootstrap el sufijo xs se omite), y un número, que indica cuántas celdas (de un total de 12 por fila) va a ocupar esa columna. Así, en el ejemplo anterior, con el selector col-md-4, estamos utilizando columnas para dispositivos relativamente pequeños (hasta unos 768px), de forma que cada columna ocupará 4 de 12 celdas (por tanto, caben 3 columnas). En el momento en que el tamaño de la ventana baje de 768px, se deshacen las columnas y se apilan una debajo de otra, ocupando cada una el 100% del ancho de pantalla disponible. Podemos hacer que una caja se comporte como varios de estos tipos, según la resolución disponible en cada momento:

<div class="col-sm-4 col-6">...</div>

Esta caja ocupa 4 rejillas para dispositivos de 768px o superiores, y 6 rejillas para dispositivos más pequeños que eso.

2.2. Más opciones de posicionamiento de elementos¶

Los selectores col vistos sirven para distribuir las diferentes columnas de cada fila. Sin embargo, el contenido de estas celdas se ve "pegado", es decir, no hay separación o gap por defecto entre las celdas de la rejilla. Tampoco se ha configurado ningún tipo de separación (padding) interna del texto ni otras opciones. Para definir estos aspectos disponemos de otros selectores de clase que podemos utilizar.

El selector p sirve para establecer un padding interno en el componente que elijamos. Detrás de este prefijo p podemos añadir una serie de elementos que definen las características de dicho padding. Así, por ejemplo, si especificamos pt-0 estamos diciendo que no queremos padding superior (t = top). Bootstrap tiene unos tamaños predefinidos numerados, de forma que p-1 es el padding más pequeño que tiene definido, y p-5 el más grande.
El selector m sirve para establecer un margen externo en el componente sobre el que se aplica, con los mismos sufijos disponibles que para el padding. Hay que tener en cuenta que, si definimos un margen en las casillas, no podremos tener 12 por fila.
El selector offset sirve para desplazar la rejilla hacia la derecha, tantas columnas como se indique. Por ejemplo, offset-3 desplaza 3 columnas a la derecha en todas las resoluciones y offset-md-4 desplaza 4 columnas para tamaños de pantalla md o superiores.

Echemos un vistazo a este ejemplo:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="estilos.css">
        <title>Ejemplo Bootstrap</title>
    </head>
    <body>
        <div class="container">
            <h1>Prueba de rejilla Bootstrap</h1>
            <div class="row m-2">
                <div class="col-md-3 m-1 p-2 caja">
                    <h2>Caja 1</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                       Dolores eligendi dolorem iure. Expedita, pariatur in.</p>
                </div>
                <div class="col-md-5 m-1 p-2 caja">
                    <h2>Caja 2</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                       Dolorem totam voluptate repellat sunt rem neque quia 
                       distinctio quo nulla esse.</p>
                </div>
                <div class="col-md-3 m-1 p-2 caja">
                    <h2>Caja 3</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                       Earum accusantium quod nesciunt porro reiciendis architecto 
                       nobis dolorem maxime! Ipsam accusamus nisi dolorem 
                       consequuntur sit nihil voluptatibus, libero animi autem eius.</p>
                </div>
            </div>
        </div>            
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

Si definimos en el selector caja un color de fondo (por ejemplo, naranja) podemos ver cómo queda delimitada cada rejilla. En este caso, hemos añadido un margen externo de tipo 1 (por todos lados) y un padding interno de tipo 2, obteniendo este resultado:

Nota

Notar que, al definir un margen, la rejilla ya no puede albergar 12 filas (el margen ocupa un espacio extra adicional), y la suma de columnas de los elementos col en el ejemplo anterior es 11 para que quepan en la misma fila.

Ejercicio 1

Descarga este ejemplo. Añade una hoja propia estilos.css simplemente para dar un color de fondo a las cajas. Ahora vamos a utilizar la rejilla de Bootstrap para que:

Las cuatro cajas se muestren una junto a otra en dispositivos tamaño lg o superior
Las cajas se muestren de dos en dos en tamaño sm o superior
Las cajas se muestren una bajo la otra en dispositivos más pequeños

Define un margen entre las cajas para separarlas, y asigna a cada caja una anchura en celdas apropiada para su contenido, a tu gusto. Aquí tienes un ejemplo:

Ejercicio 2

Crea una página HTML e incluye Bootstrap a través de su URL (CDN). Diseña una sección con un contenedor y crea dentro una cuadrícula con 12 casillas numeradas. El diseño debe comportarse así:

Pantallas ≤576px: 1 casilla por fila
Pantallas ≥768px: 3 casillas por fila
Pantallas ≥992px: 4 casillas por fila

Cada casilla debe tener:

Borde visible
Padding interno de 3
Margen inferior de 3

Una de las casillas debe colocarse con desplazamiento usando offset para observar su efecto.

Ejemplo:

3. Más información¶

Podéis leer más sobre Bootstrap y los usos de la rejilla en su documentación oficial. También podéis investigar las opciones de espaciado de elementos aquí.