--- title: Grid System localeTitle: Sistema de red --- ## Sistema de red En pocas palabras, el sistema de cuadrícula Bootstrap lo ayuda a crear diseños receptivos, se compone de un sistema de filas y columnas que lo ayuda a estructurar su contenido. Las filas son grupos horizontales de columnas, con un máximo de 12 columnas por fila. Dentro de cada fila, el contenido se coloca dentro de las columnas y puede abarcar desde 1 a 12 columnas. Bootstrap tiene cinco tipos diferentes de niveles de cuadrícula: Extra pequeño, Pequeño, Mediano, Grande y Extra grande, hay un punto de interrupción definido para cada uno de estos niveles de cuadrícula. Bootstrap utiliza píxeles para definir los puntos de interrupción del nivel de la cuadrícula, los diferentes anchos de la ventana gráfica que actúan como puntos de interrupción para los niveles de la cuadrícula son: #### Cómo funciona ###### Envase El contenedor es el elemento más externo que _contendrá_ su cuadrícula, use el `container` para un contenedor de ancho fijo en el centro de la pantalla (margen adicional en pantallas más grandes) o `container-fluid` de `container-fluid` para todo el ancho. ```
``` ###### Fila Use la `row` para agrupar sus columnas, esto mantendrá todo alineado correctamente y lo ayudará a estructurar su cuadrícula. ``` ``` ###### Columnas Las clases de columna indican el número de columnas que le gustaría usar de las 12 posibles por fila. Por ejemplo, `col-sm-6` significaría que su columna usaría la mitad del ancho de la `row` en una pantalla pequeña, y `col-lg-4` usaría una tercera parte en una pantalla grande. Aquí es cómo definiría un prefijo de clase para usar un ancho de columna en los distintos tamaños de pantalla: * **Extra pequeño** `col-1` * **Pequeño** `col-sm-1` * **Medio** `col-md-1` * `col-lg-1` **grande** * **Extra grande** `col-xl-1` ``` ``` #### Ejemplo Una cuadrícula de ancho completo que tiene cuatro columnas, cada una de las cuales ocupa una fila completa en las pantallas xs, media fila en las pantallas sm y md, y un cuarto del ancho de la fila en las pantallas que son grandes y superiores. ```