Bootstrap 5 columnas y sistema de cuadrícula | Explicado

Bootstrap 5 es la última versión del marco de Bootstrap que permite a sus usuarios crear sitios web sorprendentes con hojas de estilo CSS rápidas y capacidad de respuesta mejorada. Bootstrap funciona construyendo un sistema de cuadrícula que divide una página web en varias filas y columnas que están envueltas dentro de un contenedor. Esta publicación discute el sistema de cuadrícula en Bootstrap 5 en detalle junto con sus diversos componentes.

Sistema de cuadrícula en Bootstrap 5

Un sistema de cuadrícula en Bootstrap 5 divide una página en filas y columnas, con cada fila con 12 columnas. Puede usar las 12 columnas si lo desea, sin embargo, si no puede combinar columnas para hacer columnas más anchas. Debe utilizar columnas de manera que la suma suma hasta 12 o menos de 12. Por ejemplo, puede usar las 12 columnas que tienen un ancho de 1 o 2 columnas que tienen un ancho de 6. Cualquiera que sea la combinación, el total debe ser 12 o menos.

Este sistema de cuadrícula se compone de Flexbox, lo que hace que los elementos presentes en la cuadrícula respondan, lo que significa que el diseño cambiará su estructura dependiendo del dispositivo en el que se está mostrando. Aquí hay una representación visual de un sistema de cuadrícula.

Clases de cuadrícula en Bootstrap 5

Con el fin de utilizar el sistema de cuadrícula, hay múltiples clases disponibles que hemos discutido a continuación. Todas estas clases se pueden agrupar para hacer estructuras más flexibles y receptivas.

1. -XS- Clase

Esta clase se utiliza para hacer un sistema de cuadrícula para dispositivos extra pequeños con un ancho de pantalla <576px.

2. -SM- Clase

Esta clase se usa para hacer un diseño de cuadrícula para dispositivos pequeños con un ancho de pantalla> = 576px.

3. -clase MD

Esta clase se utiliza para crear un sistema de cuadrícula para dispositivos medios con un ancho de pantalla> = 768px.

4. -LG- Clase

Esta clase se utiliza para hacer un sistema de cuadrícula para dispositivos grandes con un ancho de pantalla> = 992px.

5. -XL- Clase

Esta clase se utiliza para hacer un sistema de cuadrícula para dispositivos extra grandes con un ancho de pantalla> = 1200px.

6. -xxl- clase

Esta clase se utiliza para hacer un sistema de cuadrícula para dispositivos extra grandes con un ancho de pantalla> = 1400px.

Nota: Las clases anteriores tienen la capacidad de aumentar el ancho, por lo tanto, si desea usar el mismo ancho para clases medianas y grandes, por ejemplo, entonces debe especificar el ancho solo para clase media.

Componentes de un sistema de cuadrícula

Un sistema de cuadrícula funciona con tres componentes que se discuten en esta sección.

1. Contenedores

Un contenedor es un elemento básico de un sistema de cuadrícula sin el cual el sistema no funciona. Estos envuelven todo el contenido de un sitio web dentro de ellos. Los contenedores envuelven el contenido de tal manera que estos elementos de fila y elementos de fila tengan elementos de columna.

2. Hilera

Las filas en un sistema de cuadrícula se conocen como el grupo horizontal de columnas. Estas filas se pueden generar utilizando el .fila clase y están envueltas dentro de un contenedor utilizando el .envase, o .fluido de contenedores clase.

3. Columnas

Un sistema de cuadrícula consta de 12 columnas que están envueltas dentro de las filas. Para crear estas columnas .columna La clase se usa junto con la combinación de cualquiera de las clases mencionadas en la sección anterior. Por ejemplo, si está creando un diseño para dispositivos pequeños adicionales, entonces use .col-xs clase.

Construir un sistema de cuadrícula básico en Bootstrap 5

Aquí vamos a demostrar cómo puede hacer un sistema de cuadrícula básico en dos escenarios diferentes.

escenario 1

Cuando desee controlar el ancho de las columnas y especificar el diseño para diferentes tipos de dispositivos que lo mostrarán.

De esta manera, puede construir una estructura básica de un sistema de cuadrícula cuando desee especificar anchos de columna usted mismo para diferentes tipos de dispositivos. El .fila La clase se usa para generar filas, por ejemplo, lo anterior crea dos filas. La primera fila agrupa tres columnas, mientras que la segunda fila tiene dos columnas.

Al generar columnas use el .columna clase junto con especificar el tipo de dispositivo y un número que debería sumar un total de 12 para cada fila.

Escenario 2

Cuando desea que Bootstrap maneje el ancho de las columnas automáticamente.

Ahora, cuando no especifica el tamaño del dispositivo y ni ningún número que se suma a un total de 12, entonces Bootstrap 5 manejará los anchos automáticamente y el diseño cambiará su comportamiento de acuerdo con el tipo de dispositivo.

Algunos ejemplos

Ahora exploraremos algunos ejemplos para comprender mejor un sistema de cuadrícula y columnas en Bootstrap 5.

Ejemplo 1

Aquí generaremos cuatro columnas de igual ancho.

Html

En el código anterior para crear cuatro columnas de igual ancho estamos utilizando el .fluido de contenedores clase para obtener un contenedor de ancho completo que se extiende por el ancho completo. Luego estamos generando una fila y envolviendo cuatro columnas de igual ancho dentro de esa fila. Cada columna ha recibido un cierto relleno utilizando el .P-4 clase de relleno y utilidad, además, a cada columna se le ha dado un color de fondo y color de texto.

Producción

Las columnas con anchos iguales se crearon con éxito.

Ejemplo 2

En el ejemplo anterior vimos cómo podemos hacer cuatro columnas de igual ancho. Ahora hagamos que estas columnas sean receptivas.

Html

Estamos haciendo que las columnas respondan usando el .Col-MD-3 clase que especifica que las columnas se acumularán entre sí cuando el ancho de la pantalla sea inferior a 768px.

Producción

Cuando el ancho de la pantalla es igual y superior a 768px.

Cuando el ancho de la pantalla es inferior a 768px.

Se han generado columnas receptivas.

Ejemplo 3

Las columnas receptivas anteriores eran iguales en ancho. Ahora generemos columnas receptivas de ancho desigual.

Html

El .Col-MD-4, y .Col-MD-8 Las clases hacen dos columnas receptivas de ancho desigual para dispositivos medianos.

Producción

Cuando el ancho de la pantalla es> = 768px.

Cuando el ancho de la pantalla es <768px.

Se generaron dos columnas receptivas con ancho desigual.

Conclusión

Un sistema de cuadrícula en Bootstrap 5 funciona con tres componentes que son un contenedor, filas y columnas. Básicamente divide una página en filas y columnas, con cada fila con 12 columnas. Las columnas de un sistema de cuadrícula se utilizan de manera que la suma suma hasta 12 o menos de 12. Además, utiliza algunas clases para crear diseños receptivos para varios tipos de dispositivos. Esta publicación analiza el sistema de cuadrícula y las columnas en detalle con la ayuda de ejemplos apropiados.