La cuadrilla

La cuadrilla de Bootstrap es un sistema que nos provee de una forma muy eficiente para crear diseños responsivos. En Bootstrap 3 se introduce lo que se conoce como Mobile First, en este caso se inicia desde el diseño de dispositivos móviles, agregando los diseños de dispositivos con una pantalla más grande por medio de los media queries. El sistema va a contar con hasta 12 columnas dependiendo del tamaño del dispositivo.

El sistema de Bootstrap funciona de la siguiente manera:

• Dentro de un <div class="container"> (ancho fijo) o <div class="container-fluid"> (ancho que se adapta a la pantalla) se deben agregar filas creadas con <div class="row"> para la alineación y espaciado correctos.
• Estas filas nos sirven como contenedoras para las columnas en las que agregamos el contenido. Las columnas se van a crear usando los div con clases basadas en el prefijo col- por ejemplo <div class="col-sm-4">.
• Si analizamos el código detrás de las filas podemos encontrar que ellas poseen un margen negativo a ambos lados. En este caso ese margen se usa para compensar los espaciados para el contenido que se agregan en las columnas por medio de los padding.
• Las columnas de la cuadrícula se crean especificando el número desde 1 hasta 12 columnas disponibles. Por ejemplo, para crear tres columnas iguales debemos agregar 3 <div class="col-md-4">.
• Si hay más de 12 columnas se colocan dentro de una sola fila, las ultimas se agregarían debajo de las primeras 12.
• Las clases que usemos se aplican a dispositivos con anchos de pantalla superiores o iguales a los tamaños especificados en los media queries. Por lo tanto, por ejemplo, la aplicación de cualquier clase .col-md-* a un elemento no sólo afectará a su estilo en los dispositivos medianas, sino también en dispositivos de gran tamaño si una clase .col-lg-* no está presente.

Los media queries

Para los dispositivos pequeños (menores a 768px), no se usa media query debido a que son las que se usan por defecto en Bootstrap. Los otros se usan de la siguiente manera:

/* Dispositivos pequeños (pantallas de 768px o mayor) */
@media (min-width: 768px) { ... }

/* Dispositivos medianos (pantallas de 992px o mayor) */
@media (min-width: 992px) { ... }

/* Dispositivos grandes (pantallas de 1200px o mayor) */
@media (min-width: 1200px) { ... }

Opciones de la cuadrícula

See the Pen by moraguex (@moraguex) on CodePen.

Ejemplos

Si usamos solamente las clases basadas en col-md-*, en los dispositivos pequeños y extra pequeños se van a mostrar las columnas una sobre otra. En dispositivos medianos o mayores se van a mostrar horizontalmente. Es muy importante recordar que debemos usar los <div class="row"> como contenedores.

See the Pen by moraguex (@moraguex) on CodePen.

Podemos convertir una cuadricula con un ancho fijo en una fluida simplemente agregando la clase .container-fluid en el contenedor en lugar de .container.

See the Pen by moraguex (@moraguex) on CodePen.

Las clases en las columnas se pueden combinar a como necesitemos. Es muy importante que debemos agregarlas yendo de lo más pequeño a lo más grande.

See the Pen by moraguex (@moraguex) on CodePen.

Cuando tenemos más de 12 columnas en una fila, las que vayan déspues de la número 12 van a pasar a quedar debajo de las primeras.

See the Pen by moraguex (@moraguex) on CodePen.

Moviendo columnas

Se pueden mover las columnas hacia la derecha usando las clases .col-*-offset-*. Estas clases incrementan el margen izquierdo de la columna por la cantidad indicada de columnas. Por ejemplo: col-md-offset-4 mueve al <div class="col-md-4 col-md-offset-4">

See the Pen by moraguex (@moraguex) on CodePen.

También podemos sobreescribirlo de cuadriculas de menor tamaño usando las clases .col-*-offset-0.

See the Pen by moraguex (@moraguex) on CodePen.

Anidar columnas

Dentro de una columna podemos crear una cuadricula nueva agregando un <div class="row"> dentro de la columna.

See the Pen by moraguex (@moraguex) on CodePen.

Reordenar columnas

Podemos cambiar el orden de las columnas en dispositivos específicos usando las clases .col-*-push-* para moverlo hacia la derecha y .col-*-pull-* para moverlo hacia la izquierda.

See the Pen by moraguex (@moraguex) on CodePen.