Columnas (Columns)

Aprende a modificar columnas con un puñado de opciones de alineación, ordenación y desplazamiento gracias a nuestro sistema de cuadrícula flexbox. Además, mira cómo usar clases de columna para administrar el ancho de elementos que no pertenecen a la cuadrícula.

En esta página

¡Atención! Asegúrate de leer la página de Cuadrícula (Grid) primero antes de profundizar en cómo modificar y personalizar tus columnas de cuadrícula.

Cómo funcionan

Las columnas se basan en la arquitectura flexbox de la cuadrícula. Flexbox significa que tenemos opciones para cambiar columnas individuales y modificar grupos de columnas a nivel de fila. Tú eliges cómo crecen, se encogen o cambian las columnas.
Al crear diseños de cuadrícula, todo el contenido va en columnas. La jerarquía de la cuadrícula de Bootstrap va desde el contenedor a la fila, a la columna y a tu contenido. En raras ocasiones, puedes combinar contenido y columna, pero ten en cuenta que puede haber consecuencias no deseadas.
Bootstrap incluye clases predefinidas para crear diseños rápidos y responsivos. Con seis puntos de interrupción y una docena de columnas en cada nivel de cuadrícula, ya tenemos decenas de clases creadas para que crees tus diseños deseados. Esto se puede desactivar a través de Sass si lo deseas.

Alineación

Utiliza utilidades de alineación flexbox para alinear columnas vertical y horizontalmente.

Alineación vertical

Cambia la alineación vertical con cualquiera de las clases responsivas align-items-*.

Una de tres columnas

html

<div class="container text-center">
  <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>

Una de tres columnas

html

<div class="container text-center">
  <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>

Una de tres columnas

html

<div class="container text-center">
  <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>

O bien, cambia la alineación de cada columna individualmente con cualquiera de las clases responsivas .align-self-*.

Una de tres columnas

Una de three columns

html

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      Una de tres columnas
    </div>
    <div class="col align-self-center">
      Una de three columns
    </div>
    <div class="col align-self-end">
      Una de three columns
    </div>
  </div>
</div>

Alineación horizontal

Cambia la alineación horizontal con cualquiera de las clases responsivas justify-content-*.

Una de dos columnas

html

<div class="container text-center">
  <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>

Envoltura de columnas (Column wrapping)

Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales se envolverá, como una unidad, en una nueva línea.

.col-9

.col-4
Como 9 + 4 = 13 > 12, este div de 4 columnas de ancho se envuelve en una nueva línea como una unidad contigua.

.col-6
Las columnas siguientes continúan a lo largo de la nueva línea.

html

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Como 9 + 4 = 13 &gt; 12, este div de 4 columnas de ancho se envuelve en una nueva línea como una unidad contigua.</div>
    <div class="col-6">.col-6<br>Las columnas siguientes continúan a lo largo de la nueva línea.</div>
  </div>
</div>

Rupturas de columnas (Column breaks)

Romper columnas en una nueva línea en flexbox requiere un pequeño truco: agrega un elemento con width: 100% donde quieras envolver tus columnas en una nueva línea. Normalmente esto se logra con múltiples clases .row, pero no todos los métodos de implementación pueden tener esto en cuenta.

.col-6 .col-sm-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Forzar a las siguientes columnas a romperse a una nueva línea -->
    <div class="w-100"></div>

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

También puedes aplicar esta ruptura en puntos de interrupción específicos con nuestras utilidades de visualización responsivas.

.col-6 .col-sm-4

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Forzar a las siguientes columnas a romperse a una nueva línea en el punto de interrupción md y superior -->
    <div class="w-100 d-none d-md-block"></div>

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

Reordenación

Clases de orden (Order classes)

Usa las clases .order- para controlar el orden visual de tu contenido. Estas clases son responsivas, por lo que puedes establecer el orden (order) por punto de interrupción (por ejemplo, .order-1.order-md-2). Incluye soporte de 1 a 5 en los seis niveles de cuadrícula.

Primero en el DOM, sin orden aplicado

Segundo en el DOM, con un orden más grande

Tercero en el DOM, con un orden de 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Primero en el DOM, sin orden aplicado
    </div>
    <div class="col order-5">
      Segundo en el DOM, con un orden más grande
    </div>
    <div class="col order-1">
      Tercero en el DOM, con un orden de 1
    </div>
  </div>
</div>

También hay clases responsivas .order-first and .order-last que cambian el orden (order) de un elemento aplicando order: -1 y order: 6, respectivamente. Estas clases también se pueden mezclar con las clases numeradas .order-* según sea necesario.

Primero en el DOM, ordenado al final

Segundo en el DOM, sin ordenar

Tercero en el DOM, ordenado al principio

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      Primero en el DOM, ordenado al final
    </div>
    <div class="col">
      Segundo en el DOM, sin ordenar
    </div>
    <div class="col order-first">
      Tercero en el DOM, ordenado al principio
    </div>
  </div>
</div>

Si necesitas más clases .order-*, puedes agregar otras nuevas modificando nuestro mapa Sass $utilities. Lee nuestros documentos de mapas y bucles Sass o nuestros documentos de modificación de utilidades para obtener más detalles.

$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (
            6: 6, // Agregar una nueva utilidad `.order-{breakpoint}-6`
            last: 7 // Cambiar la utilidad `.order-{breakpoint}-last` para usar el siguiente número
          )
        ),
      ),
    ),
  )
);

Desplazamiento de columnas (Offsetting columns)

Puedes desplazar las columnas de la cuadrícula de dos formas: nuestras clases de cuadrícula responsivas .offset- y nuestras utilidades de margen. Las clases de cuadrícula están dimensionadas para coincidir con las columnas, mientras que los márgenes son más útiles para diseños rápidos donde el ancho del desplazamiento es variable.

Clases de desplazamiento (Offset classes)

Mueve las columnas hacia la derecha usando las clases .offset-md-*. Estas clases aumentan el margen izquierdo de una columna en * columnas. Por ejemplo, .offset-md-4 mueve .col-md-4 cuatro columnas.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Además de limpiar las columnas en puntos de interrupción responsivos, es posible que necesites restablecer los desplazamientos. Mira esto en acción en el ejemplo de cuadrícula:

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilidades de margen

Con el paso a flexbox en la versión 4, puedes utilizar utilidades de margen como .me-auto para forzar a las columnas hermanas a alejarse unas de otras.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Clases de columna independientes

Las clases .col-* también se pueden usar fuera de un .row para darle a un elemento un ancho específico. Siempre que las clases de columna se utilicen como hijos no directos de una fila, se omiten los rellenos (paddings).

.col-3: ancho del 25%

.col-sm-9: ancho del 75% por encima del punto de interrupción sm

html

<div class="col-3 p-3 mb-2">
  .col-3: ancho del 25%
</div>

<div class="col-sm-9 p-3">
  .col-sm-9: ancho del 75% por encima del punto de interrupción sm
</div>

Las clases se pueden usar junto con utilidades para crear imágenes flotantes responsivas. Asegúrate de volver a envolver el contenido en un contenedor .clearfix para limpiar el float si el texto es más corto.

Un párrafo de texto de marcador de posición. Lo estamos usando aquí para mostrar el uso de la clase clearfix. Estamos agregando bastantes frases sin sentido aquí para demostrar cómo interactúan las columnas aquí con la imagen flotante.

Como puedes ver, los párrafos se envuelven con gracia alrededor de la imagen flotante. Ahora imagina cómo se vería esto con contenido real aquí, en lugar de este aburrido texto de marcador de posición que sigue y sigue, pero que en realidad no transmite información tangible. Simplemente ocupa espacio y realmente no debería leerse.

Y sin embargo, aquí estás, todavía perseverando en la lectura de este texto de marcador de posición, esperando algunas ideas más o algún huevo de pascua oculto de contenido. Un chiste, tal vez. Desafortunadamente, no hay nada de eso aquí.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    Un párrafo de texto de marcador de posición. Lo estamos usando aquí para mostrar el uso de la clase clearfix. Estamos agregando bastantes frases sin sentido aquí para demostrar cómo interactúan las columnas aquí con la imagen flotante.
  </p>

  <p>
    Como puedes ver, los párrafos se envuelven con gracia alrededor de la imagen flotante. Ahora imagina cómo se vería esto con contenido real aquí, en lugar de este aburrido texto de marcador de posición que sigue y sigue, pero que en realidad no transmite información tangible. Simplemente ocupa espacio y realmente no debería leerse.
  </p>

  <p>
    Y sin embargo, aquí estás, todavía perseverando en la lectura de este texto de marcador de posición, esperando algunas ideas más o algún huevo de pascua oculto de contenido. Un chiste, tal vez. Desafortunadamente, no hay nada de eso aquí.
  </p>
</div>