Bootstrap - Sistema de rejillas

EL sistema de Grilla o regilla de  Bootstrap  permite hasta 12 columnas (horizontal) en la página. Puede usar cada uno de ellos individualmente o fusionarlos para obtener columnas más anchas. Puede usar todas las combinaciones de valores que sumen 12. Puede usar 12 columnas cada una de ancho 1, o 3 columnas  donde cada una de ancho tenga 4 o cualquier otra combinación, como se observa en las siguientes imágenes

.

El sistema de cuadrícula Bootstrap tiene cuatro clases que se pueden combinar para hacer diseños más flexibles:

col-xs - (<576px) Para teléfonos móviles con retrato.  (Extra pequeño)

col-sm - (> = 576px) Para teléfonos Landscapes           (Pequeño)

col-md - (> = 768px) Para tabletas / Phablets                (Medio)

col-lg - (> = 992px) Para computadoras de escritorio / laptops de tamaño pequeño (992px)

col-xl - (> = 1200px) Para computadoras de escritorio / laptops de mayor tamaño  (1200px)

Posibles disposiciones para dispositivos móviles  (Extra pequeño)

Al añadir otro contenedor dentro de cualquier rejilla, también tendrá 12 columnas (aunque más pequeñas) y deberás seguir la mismas instrucciones que para los contenedores generales.

Por si no te ha quedado claro, así sería la disposición de los elementos columna en un monitor y los mismos elementos en un teléfono (estirado para no perdernos nada).

Componentes del sistema de red:

Use 'contenedor' para un contenedor receptivo de ancho fijo y use 'container-fluid' para un contenedor de ancho completo, que abarca todo el ancho de su ventana gráfica.

Actividad

Investiga como usar un form-group y form-control y aplica el concepto a través de un ejemplo.


Fuente
https://www.geeksforgeeks.org/bootstrap-part-2/