Construye sitios rápidos y responsives con

Bootstrap
 Columnas
Vamos a aprender a modificar columnas seteando, con clases
específicas, opciones de alineación, orden y compensación.

Estas mismas clases nos van a permitir realizar modificaciones de ancho

que no son las del grid.

Es importante haber leído y comprendido el tema de grid para poder

seguir con estas clases.
 ¿Cómo funcionan las columnas?

• Se basan en la arquitectura flexbox del GRID

• Al utilizar los diseños de GRID, todo el contenido se acomoda en columnas

• Bootstrap inclute clases predefinidas que nos ayudan a crear los diseños en forma
rápida y responsive
 Alineación

ROW -> Start – Center – End

 Alineación
COL -> Start – Center – End
Alineación horizontal
 Wrapping de columnas
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.
 Breakpoint de columnas
Dividir columnas en una nueva línea en flexbox requiere un pequeño truco: agrega
un elemento con width:100%.
 Breakpoint de columnas
También puedes aplicar esta interrupción en breakpoints específicos con nuestras
utilidades de visualización responsive.
 Reordenado de Elementos
El uso de las clases .order- nos permiten controlar el orden visual de los elementos.
Son clases responsives, por lo que podemos hacer uso de los breakpoints.
Por ejemplo: .order-1 .order-lg-3.
Solo podemos hacer uso del 1 al 5
 Reordenado de Elementos
También podemos usar clases ordinales
Por ejemplo: .order-first .order-last
 Compensación de columnas
Movemos las columnas a la derecha usando las clases .offset-.
Se usan para aumentar el margen izquierdo de una columna en columnas *. Por
ejemplo, .offset-md-4
 Compensación de columnas
Además de borrar las columnas en los breakpoints responsive, es posible que
debas restablecer las compensaciones. Observa esto en acción en
el ejemplo de cuadrícula.
 Utilidades de margen
Con el cambio a flexbox en v4, puedes usar utilidades de margen como .me-auto para forzar que las
columnas hermanas se separen entre sí.
Columnas standalone
 Columnas standalone
Las clases se pueden usar juntas a las clases de utilidad para crear
imágenes flotantes. Se debe envolver el contenido con .clearfix para
que el responsive acomode el texto en el caso de que sea corto.