columnas

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

En esta página

¡Aviso! Asegúrese de leer primero la página de la cuadrícula antes de sumergirse en cómo modificar y personalizar las columnas de la cuadrícula.

Cómo trabajan ellos

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 . Usted elige 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 desde el contenedor hasta la fila y la columna hasta su contenido. En raras ocasiones, puede combinar contenido y columna, pero tenga en cuenta que puede haber consecuencias no deseadas.
Bootstrap incluye clases predefinidas para crear diseños rápidos y receptivos. Con seis puntos de interrupción y una docena de columnas en cada nivel de cuadrícula, ya tenemos docenas de clases creadas para que pueda crear los diseños que desee. Esto se puede desactivar a través de Sass si lo desea.

Alineación

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

Alineamiento vertical

Una de tres columnas

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

Una de tres columnas

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

Una de dos columnas

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

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

.col-9

.col-4
Dado que 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 subsiguientes continúan a lo largo de la nueva línea.

<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: agregue un elemento width: 100%donde quiera envolver sus columnas en una nueva línea. Normalmente, esto se logra con múltiples .rows, pero no todos los métodos de implementación pueden dar cuenta de esto.

.col-6 .col-sm-3

<div class="container">
  <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 puede aplicar esta interrupción en puntos de interrupción específicos con nuestras utilidades de visualización receptivas .

.col-6 .col-sm-4

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

reordenando

ordenar clases

Usa .order-clases para controlar el orden visual de tu contenido. Estas clases responden, por lo que puede establecer el orderpunto de interrupción (por ejemplo, .order-1.order-md-2). Incluye compatibilidad 1con 5los seis niveles de cuadrícula.

Primero en DOM, no se aplica orden

Segundo en DOM, con un pedido más grande

Tercero en DOM, con un orden de 1

<div class="container">
  <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 responsivas .order-firsty que cambian el de un elemento aplicando y , respectivamente. Estas clases también se pueden mezclar con las clases numeradas según sea necesario..order-lastorderorder: -1order: 6.order-*

Primero en DOM, ordenado último

Segundo en DOM, desordenado

Tercero en DOM, ordenado primero

<div class="container">
  <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 de compensación

Puede compensar las columnas de la cuadrícula de dos maneras: nuestras .offset-clases de cuadrícula receptivas y nuestras utilidades de margen . Las clases de cuadrícula se dimensionan para que coincidan 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 compensación

Mover columnas a la derecha usando .offset-md-*clases. Estas clases aumentan el margen izquierdo de una columna por *columnas. Por ejemplo, .offset-md-4se mueve .col-md-4sobre cuatro columnas.

.col-md-4

.col-md-4 .desplazamiento-md-4

.col-md-3 .desplazamiento-md-3

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

<div class="container">
  <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 de respuesta, es posible que deba restablecer las compensaciones. Vea esto en acción en el ejemplo de cuadrícula .

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

.col-sm-5 .desplazamiento-sm-2 .col-md-6 .desplazamiento-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

<div class="container">
  <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, puede usar utilidades de margen como .me-autopara forzar que las columnas hermanas se separen entre sí.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

<div class="container">
  <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 .col-*clases también se pueden usar fuera de a .rowpara dar a un elemento un ancho específico. Siempre que las clases de columna se utilicen como elementos secundarios no directos de una fila, se omiten los rellenos.

.col-3: ancho de 25%

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

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

Las clases se pueden usar junto con las utilidades para crear imágenes flotantes receptivas. Asegúrese de envolver el contenido en un .clearfixenvoltorio 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 las columnas interactúan aquí con la imagen flotante.

Como puede ver, los párrafos se envuelven con gracia alrededor de la imagen flotante. Ahora imagine cómo se vería esto con algún 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 en realidad no debe leerse.

Y, sin embargo, aquí estás, aún perseverando en la lectura de este texto de marcador de posición, con la esperanza de obtener más información o algún huevo de pascua oculto de contenido. Una broma, tal vez. Desafortunadamente, no hay nada de eso aquí.

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