El sistema de cuadrícula de Bootstrap permite hasta 12 columnas en la página. Si no deseas utilizar las 12 columnas individualmente, puedes agrupar las columnas para crear columnas más anchas. El sistema de cuadrícula de Bootstrap es responsive y las columnas se reorganizarán según el tamaño de la pantalla: en una pantalla grande podría verse mejor con el contenido organizado en tres columnas, pero en una pantalla pequeña sería mejor si los elementos de contenido se apilaran encima del otro.
Clases Grid
El sistema de cuadrícula Bootstrap 4 tiene cinco clases:
- .col-: dispositivos extra pequeños: ancho de pantalla inferior a 576 px.
- .col-sm: dispositivos pequeños: ancho de pantalla igual o superior a 576 px.
- .col-md: dispositivos medianos: ancho de pantalla igual o superior a 768 px.
- .col-lg: dispositivos grandes: ancho de pantalla igual o superior a 992 px.
- .col-xl: dispositivos extra grandes: ancho de pantalla igual o superior a 1200 px.
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Consejo: cada clase se escala, por lo que si deseas establecer los mismos anchos para sm y md, solo necesitas especificar sm.
Reglas del sistema de cuadrícula
Algunas reglas del sistema de cuadrícula Bootstrap 4:
- Las filas deben colocarse dentro de un .container (ancho fijo) o .container-fluid (ancho completo) para una alineación y relleno adecuados.
- Use filas para crear grupos horizontales de columnas.
- El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser elementos secundarios inmediatos de las filas.
- Clases predefinidas como .row y .col-sm-4 están disponibles para hacer diseños de cuadrícula rápidamente.
- Las columnas crean canales (espacios entre el contenido de la columna) a través del relleno. Ese relleno se compensa en filas para la primera y última columna a través de un margen negativo en las líneas.
- Las columnas de cuadrícula se crean especificando el número de 12 columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres .col-sm-4.
- Los anchos de columna son en porcentaje, por lo que siempre son fluidos y de tamaño relativo a su elemento padre.
- La mayor diferencia entre Bootstrap 3 y Bootstrap 4 es que Bootstrap 4 ahora usa flexbox, en lugar de flotadores. Una gran ventaja de flexbox es que las columnas de cuadrícula sin un ancho especificado se diseñarán automáticamente como «columnas de igual ancho» (e igual altura). Ejemplo: tres elementos con .col-sm tendrán automáticamente un 33.33% de ancho desde el punto de ruptura pequeño en adelante.
Ten en cuenta que Flexbox no es compatible con IE9 y versiones anteriores.
Si necesitas soporte para IE8-9, usa Bootstrap 3. Es la versión más estable de Bootstrap, y aún es compatible con el equipo para correcciones de errores críticos y cambios de documentación. Sin embargo, no se agregarán nuevas funciones.
Estructura básica de una cuadrícula Bootstrap 4
La siguiente es una estructura básica de una cuadrícula con Boostrap 4.
Ejm
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Primer ejemplo: crear una fila (<div class = «row»>). Luego, agrega el número deseado de columnas (etiquetas con las clases .col – * – * apropiadas). La primera estrella (*) representa la capacidad de respuesta: sm, md, lg o xl, mientras que la segunda estrella representa un número, que siempre debe sumar 12 para cada fila.
Segundo ejemplo: en lugar de agregar un número a cada columna, deja que bootstrap maneje el diseño, para crear columnas de igual ancho: dos elementos «col» = 50% de ancho para cada columna. tres cols = 33.33% de ancho a cada col. cuatro cols = 25% de ancho, etc. También puedes usar .col-sm | md | lg | xl para hacer que las columnas respondan.