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.