Columnas

Aprende cómo modificar columnas con un puñado de opciones para alineación, ordenación y desplazamiento gracias a nuestro sistema de grid flexbox. Además, descubre cómo usar clases de columna para gestionar anchos de elementos no grid.

On this page

¡Atención! Asegúrate de leer la página del Grid primero antes de adentrarte en cómo modificar y personalizar tus columnas del grid.

Cómo funcionan

Las columnas se construyen sobre la arquitectura flexbox del grid. Flexbox significa que tenemos opciones para cambiar columnas individuales y modificar grupos de columnas a nivel de fila. Tú eliges cómo crecen, se reducen o cambian las columnas.
Al construir layouts de grid, todo el contenido va en columnas. La jerarquía del grid de Bootstrap va de container a row a column 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 layouts rápidos y responsive. Con seis breakpoints y una docena de columnas en cada grid tier, tenemos decenas de clases ya construidas para que crees tus layouts deseados. Esto se puede deshabilitar mediante Sass si lo deseas.

Alineación

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

Alineación vertical

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

Una de tres columnas

html

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una de tres columnas

html

<div class="container text-center">
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una de tres columnas

html

<div class="container text-center">
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

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

Una de tres columnas

html

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Alineación horizontal

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

Una de dos columnas

html

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Ajuste de columnas

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

.col-9

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

.col-6
Las columnas siguientes continúan en 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>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Saltos de columna

Romper columnas a una nueva línea en flexbox requiere un pequeño truco: añade un elemento con width: 100% donde quieras ajustar tus columnas a una nueva línea. Normalmente esto se logra con múltiples .rows, pero no todos los métodos de implementación pueden contemplar esto.

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

    <!-- Force next columns to break to new line -->
    <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 este salto en breakpoints específicos con nuestras utilidades responsive display.

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <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>

Reordenamiento

Clases de orden

Usa las clases .order- para controlar el orden visual de tu contenido. Estas clases son responsive, así que puedes establecer el order por breakpoint (por ejemplo, .order-1.order-md-2). Incluye soporte para 1 hasta 5 en los seis grid tiers.

Primero en el DOM, sin order aplicado

Segundo en el DOM, con un order mayor

Tercero en el DOM, con un order de 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

También hay clases responsive .order-first y .order-last que cambian el 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 último

Segundo en el DOM, sin ordenar

Tercero en el DOM, ordenado primero

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Si necesitas más clases .order-*, puedes agregar nuevas modificando nuestro mapa Sass $utilities. Lee nuestra documentación sobre mapas y bucles Sass o nuestra documentación sobre modificación de utilidades para 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, // Add a new `.order-{breakpoint}-6` utility
            last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
          )
        ),
      ),
    ),
  )
);

Desplazamiento de columnas

Puedes desplazar las columnas del grid de dos formas: nuestras clases responsive de grid .offset- y nuestras utilidades de margin. Las clases de grid se dimensionan para coincidir con las columnas, mientras que los margins son más útiles para layouts rápidos donde el ancho del desplazamiento es variable.

Clases de desplazamiento

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

.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 la limpieza de columnas en los breakpoints responsive, puede que necesites restablecer los desplazamientos. Mira esto en acción en el ejemplo del grid.

.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 v4, puedes usar utilidades de margin como .me-auto para forzar a las columnas hermanas a separarse entre sí.

.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. Cuando las clases de columna se usan como hijos no directos de una fila, los paddings se omiten.

.col-3: ancho de 25%

.col-sm-9: ancho de 75% por encima del breakpoint sm

html

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

<div class="col-sm-9 p-3">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Las clases se pueden usar junto con utilidades para crear imágenes flotadas responsive. Asegúrate de 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 usamos aquí para mostrar el uso de la clase clearfix. Estamos agregando bastantes frases sin sentido aquí para demostrar cómo las columnas interactúan aquí con la imagen flotada.

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

Y sin embargo, aquí estás, perseverando en leer este texto de marcador de posición, esperando más información, o algún huevo de pascua oculto en el contenido. Un chiste, tal vez. Lamentablemente, 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>
    A paragraph of placeholder text. We’re using it here to show the use of the clearfix class. We’re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there’s none of that here.
  </p>
</div>