1 Qu es un Grid?

Organizar los elementos de una pgina Web es muy importante y se debe prever las ubicaciones al
inicio del proyecto. Por eso podemos contestar a varias preguntas:

Necesito un banner arriba?

El men se ubicar arriba, a la izquierda, a la derecha?
Bloques al costado de los artculos?
Tiene un pie de pgina?

La ventaja de utilizar un sistema de Grid no contesta a esas preguntas, pero permite ubicar los
elementos con ms facilitad y brinda una solucin eficiente al problema de diseo responsivo.

2 Presentacin de una Grid

2.1 Principio de funcionamiento
Un Grid es simplemente una organizacin con celdas de mismas dimensiones, tal como est
representado en la siguiente imagen:

Podemos decidir cmo organizar nuestros elementos, utilizando por cada uno una o varias celdas:

El sistema de grid de Bootstrap contiene 12 columnas.

2.2 Palabras claves

Dentro del sistema de grid de Bootstrap, las columnas se llaman col, y las lneas se llaman row.
3 La Grid de Bootstrap
La Grid de Bootstrap no es tan ideal como el ejemplo anterior. Las columnas son en realidad una
divisin en porcentaje del ancho total de la ventana de visualizacin. Pero las lneas no tienen una
altura fija, sino que depende del contenido de cada celda. Por ejemplo:

Conclusin: una lnea tomara la altura del elemento ms alto que contiene.

3.1 Organizacin de la grid

Bootstrap es ms que todo un archivo CSS, con numerosas clases definidas a fin de utilizarlas en los
elementos HTML.

Con el sistema de grid, la primera clase a conocer es la clase row, la cual representa una lnea de la
grid. Esta clase establece mrgenes negativas a la izquierda y a la derecha:
.row {
margin-left: -15px;
margin-right: -15px;
}
El elemento HTML con la clase row contendr todas las columnas. Entonces la siguiente etapa es
decidir cul es el tamao del elemento en cantidad de columnas, con un mximo de 12. A fin de definir
esta cantidad, Bootstrap utiliza varias clases:

Tamao de 1 columna de ancho: col-xs-1 o col-sm-1 o col-md-1 o col lg-1

Tamao de 2 columnas de ancho: col-xs-2 o col-sm-2 o col-md-2 o col-lg-2
Tamao de 3 columnas de ancho: col-xs-3 o col-sm-3 o col-md-3 o col-lg-3

Tamao de 12 columnas de ancho: col-xs-12 o col-sm-12 o col-md-12 o col-lg-12

Por qu existen 4 clases por cada tamao de columna?

Bootstrap es responsivo, quiere decir que se adapta al tamao de la pantalla o ventana de visualizacin
del cliente. Entonces permite, con el mismo cdigo fuente HTML, una visualizacin en una pantalla
larga de 20, una Tablet o un Smartphone.

Cul es el comportamiento de los elementos cuando se reduce o se ampla la ventana?

Podemos imaginar dos hiptesis:

Los elementos se dimensionan automticamente, guardando la misma posicin

Los elementos se superponen o se apilan cuando la ventana es demasiada pequea (o algunos
desaparecen)
Ejemplo Pantalla larga.

Ejemplo Tablet
 Ejemplo Smartphone

Usando las diferentes clases de columnas permite al diseo adaptarse u ocultar algunos elementos en
funcin del tamao de la pantalla. Bootstrap considera por defecto 4 tipos de pantallas:

Muy pequeo: Smartphone

Pequeo: Tablet
Mediano: Laptop o desktop con pantalla mediana
Grande: Laptop o Desktop con pantalla larga

Cada tipo tiene su valor de referencia segn el tamao exprimido en pixeles:

Muy pequeos Pequeos Medianos Grandes

Clase col-xs-* col-sm-* col-md-* col-lg-*

Valor de < 768 px >= 768 px >= 992 px >= 1200 px
referencia
Rango de Hasta 767px de De 768px hasta De 992px hasta De 1200px de
tamao ancho 991px de ancho 1199px de ancho ancho hasta ms
Cada celda de la grid debe utilizar una de esas clases, pero tambin podemos combinarlas. En caso de
tener un solo tamao definido, se redimensionan los elementos en caso de pantalla ms grande, y se
apilan en caso de pantalla ms pequea.

Por ejemplo, queremos tener una lnea con un elemento de 4 de ancho y otro de 8, por las pantallas
medianas y superiores, y que se apilan para las pantallas ms pequeas. Usaremos el siguiente cdigo:
<div class="row">
<div class="col-md-4">Ancho 4</div>
<div class="col-md-8">Ancho 8</div>
</div>
El diseo ser el siguiente en funcin del tamao de pantalla:
4 Ejemplos de diseos
A fin de facilitar la visualizacin y la comprensin del sistema de Grid, vamos a aadir un cdigo CSS
para dar color a las columnas.

Crear un nuevo archivo CSS dentro de su proyecto, llamado tuto.css y pegar el siguiente contenido:
body {
padding-top: 10px;
}
[class*="col-"] {
background-color: #eee;
border: 2px solid black;
line-height: 40px;
text-align: center;
}
Este cdigo permite dar un color de fundo a las columnas y un borde:

4.1 El contenedor
Las lneas y columnas de Bootstrap deben ser incluidas dentro de un elemento contenedor utilizando
una de esas dos clases:

container: permite centrar el sistema de grid con un ancho fijo

.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

container-fluid: utiliza todo el ancho disponible para el sistema de grid

.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
 }
Ambos contenedores se centran en la pgina (margin auto) y tienen un padding de 15px a la derecha
y a la izquierda.

La clase container tiene un ancho definido por cada medio o tamao de pantalla, utilizando la
propiedad @media de CSS:

Muy pequeos Pequeos Medianos Grandes

Tamao del Automatico 750 px 970 px 1170 px

container
Valor de < 768 px >= 768 px >= 992 px >= 1200 px
referencia

@media (min-width: 768px) {

.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
La clase container-fluid no tiene ancho definido as que ocupara el 100% del espacio disponible.

4.2 Una sola fila

En este primer ejemplo, se declara una sola fila, con dos columnas. Vamos a ver la diferencia entre
container y container-fluid.

4.2.1 Container
Crear un nuevo archivo html y pegar el siguiente cdigo (adaptar las rutas de los archivos en funcin
de su proyecto):

<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/tuto.css" rel="stylesheet">
</head>
<body style="margin-top:20px">
<div class="container">
<div class="row">
<div class="col-md-4">4 columnas</div>
<div class="col-md-8">8 columnas</div>
</div>
 </div>
</body>
</html>

Este resultado produce el siguiente resultado:

Pantalla grande:

El contenedor mide 1170px de ancho y est centrado en la pgina.

Como son columnas de tipo md, aparecen las 2.

Pantalla mediana:

El contenedor mide 970px de ancho y est centrado en la pgina.

Como son columnas de tipo md, aparecen las 2.

Pantalla pequea:

El contenedor mide 740px y est centrado en la pgina.

Como son columnas de tipo md, se superponer las 2.

4.2.2 Container-fluid
Crear un nuevo archivo html y pegar el siguiente cdigo (adaptar las rutas de los archivos en funcin
de su proyecto):

<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/tuto.css" rel="stylesheet">
</head>
<body style="margin-top:20px">
<div class="container">
<div class="row">
<div class="col-md-4">4 columnas</div>
<div class="col-md-8">8 columnas</div>
</div>
</div>
</body>
</html>

Este resultado produce el siguiente resultatdo:

Pantalla grande:
El contenedor mide 100% del ancho disponible de la pgina

Como son columnas de tipo md, aparecen las 2.

Pantalla mediana:

El contenedor mide 100% del ancho disponible de la pgina

Como son columnas de tipo md, aparecen las 2.

Pantalla pequea:

El contenedor mide 100% del ancho disponible de la pgina

Como son columnas de tipo md, se superponer las 2.

4.3 Varias filas con diferentes tamaos

Es posible crear varias filas, con tipo y tamaos diferentes. La nica regla es que cada fila no puede
contener ms de 12 columnas.

Por ejemplo:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">6</div>
<div class="col-lg-6">6</div>
</div>
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-2">2</div>
<div class="col-md-3">3</div>
<div class="col-md-6">8</div>
</div>
<div class="row">
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">2</div>
</div>
</div>
Produce el siguiente resultado:

Pantallas grandes:
 Pantallas medianas

Pantallas pequeas

4.4 Saltar columnas

Bootstrap permite saltar columnas y no imprimir contenidos. Para eso se utiliza las siguientes clases,
por cada tamaao (xs, sm, md, lg):

Col-*-offset-1
Col-*-offset-2

Col-*-offset-11

Esas clases solamente aaden un margen a la izquierda de la columna. Por ejemplo:

.col-lg-offset-6 {
margin-left: 50%;
}

6 columnas corresponden a la mitad de la pgina (ya que contiene 12 columnas), as que se aplica un
margen de 50%.

<div class="container">
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-6">6</div>
<div class="col-lg-3">3</div>
 </div>
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-offset-6 col-lg-3">3</div>
</div>
</div>

Produce el siguiente resultado:

Es posible tambin realizar varios saltos en una misma fila:

<div class="container">
<div class="row">
<div class="col-lg-2 col-lg-offset-1">2</div>
<div class="col-lg-4 col-lg-offset-2">4</div>
<div class="col-lg-2 col-lg-offset-1">2</div>
</div>
</div>

Produce el siguiente resultado:

4.5 Imbricaciones de elementos

Es posible imbricar elementos, es decir crear filas y columnas adentro de otras, a fin de tener un diseo
ms complejo y adecuado a nuestros deseos.

Por un ejemplo, crear una columna de 8 quien contiene columnas de 3, 6 y 3, y otra de 4 que contiene
2,2 y 8:
<div class="container">
<div class="row">
<div class="col-lg-8">8
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-6">6</div>
<div class="col-lg-3">3</div>
</div>
</div>
<div class="col-lg-4">4
<div class="row">
<div class="col-lg-2">2</div>
<div class="col-lg-2">2</div>
<div class="col-lg-8">8</div>
</div>
</div>
</div>
</div>
Es posible realizar varias imbricaciones, con varios niveles a fin de tener un disea muy compleo:
<div class="container">
<div class="row">
<div class="col-md-12">Primer nivel de 12 columnas
<div class="row">
<div class="col-md-8">Segundo nivel de 8 columnas
<div class="row">
<div class="col-md-4">Tercer nivel de 4 columnas</div>
<div class="col-md-6 col-md-offset-2">Tercer nivel de 2
columnas con salto de 2
<div class="row">
<div class="col-md-3 col-md-offset-1">Cuarto nivel de 3 con
salto de 1</div>
<div class="col-md-5 col-md-offset-1">Cuatro nivel de 5 con
salto de 1</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">Segundo nivel</div>
</div>
</div>
</div>
</div>

Es importante precisar que el tamao de una fila, siempre es de 12 columnas. Imbricada o no