Uso de Columnas de contenido en Bootstrap
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.
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-*.
<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> <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> <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 cambia la alineación de cada columna individualmente con cualquiera de las clases responsive .align-self-*.
<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 tres columnas </div> <div class="col align-self-end"> Una de tres columnas </div> </div> </div>Alineación horizontal
Cambia la alineación horizontal con cualquiera de las clases responsive justify-content-*.
<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
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.
<div class="container"> <div class="row"> <div class="col-9">.col-9</div> <div class="col-4">.col-4<br>Ya que 9 + 4 = 13 > 12, este div de 4 columnas de ancho se incluye en una nueva línea como una unidad contigua.</div> <div class="col-6">.col-6<br>Las columnas siguientes continúan en la nueva línea.</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.
<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.
<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.
<div class="bd-example m-0 border-0 bd-example-row"> <div class="container text-center"> <div class="row"> <div class="col"> Primero en DOM, no se aplica ningún orden </div> <div class="col order-5"> Segundo en DOM, con un orden mayor </div> <div class="col order-1"> Tercero en DOM, con un orden de 1 </div> </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.
<div class="container text-center"> <div class="row"> <div class="col order-last"> Primero en DOM, ordenado al final </div> <div class="col"> Segundo en DOM, desordenado </div> <div class="col order-first"> Tercero en DOM, ordenado primero </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.
<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.
<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í.
<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.
<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 responsive. Asegúrate de envolver el contenido en un contenedor .clearfix para borrar el flotante si el texto es más corto.
<div class="clearfix"> <svg class="bd-placeholder-img col-md-6 float-md-end mb-3 ms-md-3" width="100%" height="210" role="img" aria-label="Marcador de posición: imagen flotante responsive" focusable="false" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"> <title>Marcador de posición</title> <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Imagen flotante responsive</text> </svg>
<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 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. </p>
<p> 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. </p> </div>