Contenedores, filas y columnas en Bootstrap 5

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