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.

1. Funcionamiento general de la rejilla¶

Bootstrap estructura el área de contenido de la página en una especie 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-sm-4">
                    <h2>Columna 1</h3>
                    <p>Texto de prueba para esta primera columna.</p>
                </div>
                <div class="col-sm-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-sm-4">
                    <h2>Columna 3</h3>
                    <p>Tercera y última columna.</p>
                </div>
            </div>
        </div>
    </body>
</html>

La apariencia que tendrá esta página en el navegador será aproximadamente ésta:

Hemos utilizado algunos selectores de clase de los muchos que ofrece el CSS de Bootstrap.

1.1. Selectores de rejilla¶

El selector container permite definir una caja que contenga a todo nuestro contenido, estableciendo unos márgenes de separación con el borde de la página. Existe una alternativa, que es el selector container-fluid, que no pone márgenes laterales para que el contenido ocupe todo lo que pueda.

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-sm-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 pequeños (< 768px) o superiores, y 6 rejillas para dispositivos extra pequeños (xs, es decir, < 576px). Es decir, se verá a 3 columnas en pantallas pequeñas o superiores, y a 2 columnas en pantallas extra-pequeñas.

1.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. Para definir espaciados entre los elementos (ya sean celdas de rejilla u otros componentes), Bootstrap dispone de otros selectores de clase que podemos utilizar.

Por ejemplo, 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.

Del mismo modo, 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.

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:

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.

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í.

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.