Ver en GitHub

Columnas

Aprende a modificar columnas con un puñado de opciones de alineación, orden y desplazamiento gracias a nuestro sistema de cuadrícula flexbox. Además, aprende cómo usar clases de columnas para administrar anchos de elementos que no son de cuadrícula.

😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

¡Atención! Asegúrate de leer la página de cuadrícula antes de profundizar en cómo modificar y personalizar las columnas de tu 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 reducen 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 de contenedor a fila a columna a su 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 responsive. Con seis puntos de interrupción y una docena de columnas en cada uno nivel de cuadrícula, tenemos docenas de clases ya creadas para que puedas crear los diseños que desees. Esto se puede desactivar a través de Sass si lo deseas.

Alineación

Usa las utilidades de alineación de 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>

Envoltura de columnas

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

.col-9

.col-4
Ya que 9 + 4 = 13 > 12, este div de 4 columnas de ancho se incluye en 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

Dividir columnas en una nueva línea en flexbox requiere un pequeño truco: agrega un elemento con width: 100% donde quieras ajustar tus columnas a una nueva línea. Normalmente esto se logra con múltiples .row, pero no todos los métodos de implementación pueden tener en cuenta 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 esta interrupción en puntos de interrupción específicos con nuestras utilidades de visualización responsive.

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

Reordenar

Ordenar clases

Usa las clases .order- para controlar el orden visual de tu contenido. Estas clases son responsive, por lo que puedes establecer el order por punto de interrupción (por ejemplo, .order-1.order-md-2). Incluye soporte para 1 a 5 en los seis niveles de la cuadrícula. Si necesitas más clases .order-* puedes modificar el número predeterminado mediante la variable Sass.

Primero en DOM, no se aplica ningún orden

Segundo en DOM, con un orden mayor

Tercero en DOM, con un orden 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 DOM, ordenado al final

Segundo en DOM, desordenado

Tercero en 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>

Columnas compensadas (offset)

Puedes compensar las columnas de la cuadrícula de dos maneras: nuestras clases de cuadrícula .offset- responsive y nuestra utilidades de margen. Las clases de cuadrícula tienen un tamaño que coincide 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 offset

Mueve 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 en 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 borrar las columnas en los puntos de interrupción responsive, es posible que necesites restablecer los offsets. Ve 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 cambio a flexbox en v4, puedes usar utilidades de margen como .me-auto para alejar las columnas hermanas 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 columnas independientes

Las clases .col-* también se pueden usar fuera de un .row para darle a un elemento un ancho específico. Siempre que se utilizan clases de columnas como hijos indirectos de una fila, se omiten los rellenos.

.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: 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 flotantes responsive. Asegúrate de envolver el contenido en un contenedor .clearfix para borrar el flotante 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 elegantemente alrededor de la imagen flotante. Ahora imagina cómo se vería esto con contenido real aquí, en lugar de solo 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 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 obtener más ideas o algún contenido escondido. Una broma, tal vez. Desgraciadamente aquí no hay nada de eso.

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>