6. Contenedores, filas y columnas en Bootstrap 5
Bootstrap ofrece un sistema de contenedores o rejillas, creado con flexbox, que facilita el diseño y la disposición del contenido en una página web. Este sistema se basa en ir creando contenedores y, en su interior, filas y columnas. En estas columnas se irán integrando todos los elementos del sitio web: botones, imágenes, formularios, menús, etc.
Los contenedores, filas y columnas se crean definiendo etiquetas de tipo <div> y definiendo las clases correspondientes. Veamos paso por paso cómo creamos todos estos elementos con Bootstrap 5.
6.1. Contenedores
Lo primero que necesitamos para definir un contenedor es crear un div con la clase .container, .container-fluid o .container-{PuntoRuptura}.
| Clase | Descripción |
|---|---|
.container | El contenido aparece centrado y con un ancho fijo. |
.container-fluid | El contenido ocupa todo el ancho disponible (100%). |
.container-{PuntoRuptura} | El contenido ocupa todo el ancho disponible (100%) hasta que se alcanza el punto de ruptura especificado. Por ejemplo, .container-sm se aplicará hasta el punto de ruptura definido para dispositivos pequeños, .container-md para dispositivos medianos, .container-lg para dispositivos grandes, etc. |
Veamos cómo funcionan las clases anteriores según el tamaño del dispositivo. Si miramos, por ejemplo, la clase .container-xl podemos comprobar como el contenedor ocupará el 100% del ancho total de la pantalla hasta 1140px y para pantallas de mayor tamaño será centrado y con un ancho fijo.
| Clase | Extra small<576px | Small≥576px | Medium≥768px | Large≥992px | X-Large≥1200px | XX-Large≥1400px |
|---|---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Veamos cómo definir contenedores con varios ejemplos.
.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>
.container-{PuntoRuptura}: el contenido ocupa todo el ancho disponible (100%) hasta que se alcanza el punto de ruptura especificado.
<div class="container-sm">
...
</div>
Ejemplos anteriores en CodePen
6.2. Filas y columnas
En Bootstrap 5, las filas se utilizan para agrupar horizontalmente a varias columnas. Por tanto, los elementos hijo de las filas serán las columnas. Las filas siempre se definen dentro de un contenedor y para crearlas usamos la clase .row.
Cada fila puede contener hasta 12 columnas (también permite diseños de más columnas, pero como base se tiene en cuenta una división estándar de 12 columnas). El contenido del sitio web siempre se coloca dentro de las columnas.
Las columnas se crean con la clase .col. También se pueden crear columnas usando las clases .col-*, donde * es el tamaño de la columna (como máximo 12 columnas en una fila).
También podemos definir los column breaks o saltos de columna mediante la clase .col-xx para definir el ancho de la columna en dispositivos de diferentes tamaños (xx representa el breakpoint o punto de ruptura sm, md, lg, xl, y xxl).
| Clase | Descripción |
|---|---|
.row | Define una fila. Las filas deben contener columnas (.col) para alinear el contenido correctamente. |
.col | Define una columna. Puedes utilizar .col para crear un diseño de columnas responsivo. |
.col-* | Define el tamaño de cada columna (división estándar de 12 columnas) |
.col-xx-* | Utiliza .col-xx-* para definir el ancho de la columna en dispositivos de diferentes tamaños (xx representa el breakpoint o punto de ruptura sm, md, lg, xl, y xxl). El asterisco indica el tamaño de división. |
Las siguientes clases se utilizan para definir el diseño de las columnas en función del tamaño de la pantalla de la siguiente manera:
| Clase | Tamaño de Pantalla |
|---|---|
| col-xs-* | Extra pequeño (menos de 576 px) |
| col-sm-* | Pequeño (576 px o más) |
| col-md-* | Mediano (768 px o más) |
| col-lg-* | Grande (992 px o más) |
| col-xl-* | Extra grande (1200 px o más) |
En estas clases, el asterisco (*) se reemplaza con un número que indica el número de columnas que debe ocupar el elemento en la grilla. Por ejemplo, col-sm-6 significa que el elemento ocupará 6 columnas en pantallas pequeñas (sm) o más grandes.
Veamos varios ejemplos.
Ejemplo de creación de 3 columnas con la clase .col:
<div class="container">
<div class="row">
<div class="col">
Columna
</div>
<div class="col">
Columna
</div>
<div class="col">
Columna
</div>
</div>
</div>
Ejemplo de creación de 3 columnas con la clase .col-*:
<div class="container">
<div class="row">
<div class="col-4">
Columna
</div>
<div class="col-4">
Columna
</div>
<div class="col-4">
Columna
</div>
</div>
</div>
Ejemplo de dos columnas, una que ocupa 4 espacios y otra que ocupa 8 espacios:
Para este ejemplo es necesario usar .col-*. Para ello, simplemente asignamos las clases «col-4» y «col-8» a las respectivas columnas.
<div class="container">
<div class="row">
<div class="col-4">Contenedor de 4 columnnas</div>
<div class="col-8">Contenedor de 8 columnna</div>
</div>
</div>
Mismo ejemplo anterior de dos columnas, una que ocupa 4 espacios y otra que ocupa 8 espacios pero que se modifica el tamaño según el dispositivo. Por ejemplo para tamaño col-md las dos columnas ocuparán 6 espacios. Por tanto, para tamaños de pantalla inferiores a md (720px) el contenedor 1 ocupará 4 y el contenedor 2 ocupará 6 y para tamaños de pantalla superiores a md (720px) ambos contenedores ocuparán 6 columnas cada uno.
<div class="container">
<div class="row">
<div class="col-4 col-md-6">Contenedor 1</div>
<div class="col-8 col-md-6">Contenedor 2</div>
</div>
</div>
Ejemplos anteriores en CodePen
6.2.1. Alineamiento horizontal de columnas
En Bootstrap 5, se pueden usar las utilidades de alineación flexbox para alinear horizontalmente las columnas. Para hacerlo, se pueden usar las clases que se muestran en la siguiente tabla en el elemento .row que contiene las columnas.
| Clase | Descripción |
|---|---|
.justify-content-start | Alinea las columnas al inicio de la fila. |
.justify-content-center | Alinea las columnas al centro de la fila. |
.justify-content-end | Alinea las columnas al final de la fila. |
.justify-content-between | Distribuye el espacio entre las columnas de manera uniforme, con la primera columna al inicio y la última al final de la fila. |
.justify-content-around | Distribuye el espacio alrededor de las columnas de manera uniforme. |
.justify-content-evenly | Distribuye el espacio entre y alrededor de las columnas de manera uniforme. |
Ejemplo de alineamiento horizontal de columnas:
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
Una de dos columnas
</div>
<div class="col-4">
Una de dos columnas
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
Una de dos columnas
</div>
<div class="col-4">
Una de dos columnas
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
Una de dos columnas
</div>
<div class="col-4">
Una de dos columnas
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
Una de dos columnas
</div>
<div class="col-4">
Una de dos columnas
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
Una de dos columnas
</div>
<div class="col-4">
Una de dos columnas
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
Una de dos columnas
</div>
<div class="col-4">
Una de dos columnas
</div>
</div>
</div>
Ejemplo anterior en CodePen
6.2.2. Alineamiento vertical de columnas
En Bootstrap 5, puedes utilizar las utilidades de alineación flexbox para alinear verticalmente las columnas. Para hacerlo, puedes usar las clases .align-items-* en el elemento .row que contiene las columnas. Por ejemplo, para alinear las columnas al inicio, centro o final de la fila, puedes usar las clases .align-items-start, .align-items-center y .align-items-end, respectivamente.
También puedes alinear individualmente las columnas utilizando las clases .align-self-* en los elementos .col. Por ejemplo, para alinear una columna al inicio, centro o final de la fila, puedes usar las clases .align-self-start, .align-self-center y .align-self-end, respectivamente. Veamos una tabla descriptiva.
| Clase | Descripción |
|---|---|
.align-items-start | Alinea las columnas en la parte de arriba de la fila. |
.align-items-center | Alinea las columnas en el centro de la fila. |
.align-items-end | Alinea las columnas en la parte de abajo de la fila. |
.align-self-start | Alinea individualmente una columna en la parte de arriba de la fila. |
.align-self-center | Alinea individualmente una columna al centro de la fila. |
.align-self-end | Alinea individualmente una columna en la parte de abajo de la fila. |
Ejemplo de alineación vertical de todas las columnas de la fila:
<div class="container">
<div class="row align-items-start">
<div class="col">
Una de tres columnas
</div>
<div class="col">
Una de tres columnas
</div>
<div class="col">
Una de tres columnas
</div>
</div>
<div class="row align-items-center">
<div class="col">
Una de tres columnas
</div>
<div class="col">
Una de tres columnas
</div>
<div class="col">
Una de tres columnas
</div>
</div>
<div class="row align-items-end">
<div class="col">
Una de tres columnas
</div>
<div class="col">
Una de tres columnas
</div>
<div class="col">
Una de tres columnas
</div>
</div>
</div>
Ejemplo anterior en CodePen
Ejemplo de alineación de columnas individuales:
<div class="container">
<div class="row">
<div class="col align-self-start">
Una de tres columnas
</div>
<div class="col align-self-center">
Una de tres columnas
</div>
<div class="col align-self-end">
Una de tres columnas
</div>
</div>
</div>
Ejemplo anterior en CodePen
6.3. Ocultando elementos con clases d-*
En Bootstrap 5, las clases d-* se utilizan para controlar la visualización (display) de los elementos en diferentes tamaños de pantalla. Estas clases son parte del sistema de diseño responsivo de Bootstrap, lo que significa que te permiten especificar cómo se deben mostrar los elementos en dispositivos con distintos tamaños de pantalla, como móviles, tabletas y escritorios. Veamos una tabla explicativa para entender mejor estas clases:
| Tamaño de Pantalla | Clase | Descripción |
|---|---|---|
| Oculto en todas | .d-none | Oculta el elemento en todos los tamaños de pantalla. |
| Oculto solo en xs | .d-none .d-sm-block | Oculta el elemento solo en pantallas extra pequeñas (menos de 576px). |
| Oculto solo en sm | .d-sm-none .d-md-block | Oculta el elemento solo en pantallas pequeñas (576px a 767px). |
| Oculto solo en md | .d-md-none .d-lg-block | Oculta el elemento solo en pantallas medianas (768px a 991px). |
| Oculto solo en lg | .d-lg-none .d-xl-block | Oculta el elemento solo en pantallas grandes (992px a 1199px). |
| Oculto solo en xl | .d-xl-none .d-xxl-block | Oculta el elemento solo en pantallas extra grandes (1200px a 1399px). |
| Oculto solo en xxl | .d-xxl-none | Oculta el elemento solo en pantallas extra-extra grandes (1400px en adelante). |
| Visible en todas | .d-block | Muestra el elemento en todos los tamaños de pantalla. |
| Visible solo en xs | .d-block .d-sm-none | Muestra el elemento solo en pantallas extra pequeñas. |
| Visible solo en sm | .d-none .d-sm-block .d-md-none | Muestra el elemento solo en pantallas pequeñas. |
| Visible solo en md | .d-none .d-md-block .d-lg-none | Muestra el elemento solo en pantallas medianas. |
| Visible solo en lg | .d-none .d-lg-block .d-xl-none | Muestra el elemento solo en pantallas grandes. |
| Visible solo en xl | .d-none .d-xl-block .d-xxl-none | Muestra el elemento solo en pantallas extra grandes. |
| Visible solo en xxl | .d-none .d-xxl-block | Muestra el elemento solo en pantallas extra-extra grandes. |
Ejemplo CodePen
Veamos un ejemplo en CodePen en el que se muestran diferentes contenedores que se adaptan según el tamaño de pantalla. Además se utilizan clases d-* para mostrar y ocultar distintos textos.
En la siguiente sección del tutorial veremos los colores tema o «theme colors» que nos ofrece Bootstrap para dar color a los elementos como los botones, las tablas, los textos o los enlaces.
Comprueba tu apendizaje