Uno de los motivos por los que uso Bootstrap 3 es por el sistema Grid que proporciona. Un sistema de 12 columnas basado en la filosofía Mobile First.
Es innegable el crecimiento que ha experimentado el acceso a Internet en dispositivos pequeños, como Smartphones, por lo que todas las empresas quieren que su marca, su sitio web se vea correctamente en este tipo de pantallas, y al mismo tiempo en las convencionales. Ahí es donde se basa la filosofía Mobile First para comenzar diseñando para Smartphones e ir subiendo el tamaño del viewport.
En este post veremos cómo utilizar de forma básica el Grid de Bootstrap 3. La información oficial y necesaria para entender su funcionamiento está en este link.
En primer lugar tenemos que ahora, en esta versión 3 de Bootstrap, tenemos cuatro tamaños de cuadrículas, comenzando con los dispositivos de menor tamaño:
- Smartphones (<768px) .col-xs-(número de columnas)
- Tablets (>=768px) .col-sm-(número de columnas)
- Desktops (>=992px) .col-md-(número de columnas)
- Desktops (>=1200px) .col-lg-(número de columnas)
El grid comienza con el sistema de cuadricula mas pequeño “Extra Small” (.col-xs-#), donde 768px es el máximo de resolución de la pantalla y siendo el grid diseñado para ser horizontal en todo momento. Seguimos con las tablets “Small” (col-sm-#), donde la resolución es mayor o igual a 768px y menor que 992px, tenemos una opción de mayor tamaño, los desktops “Medium devices” (col-md-#), donde la resolución parte de 992px y los desktops de gran tamaño “Large devices” (col-lg-#), donde la resolución mínima es de de 1200px.
Si no estás familiarizado con este método de trabajo, pensarás que tienes que añadir muchas clases a cada elemento para conseguir un resultado óptimo en cada viewport. Nada más lejos de la realidad. Es mucho mejor este sistema que tener hojas de estilos para cada viewport. Además, particularmente pongo las clases .col-md-# por defecto, y es en las particularidades donde utilizo las demás.
Por ejemplo, si queremos que se muestren 1 fila y 4 columnas en Desktop y cuando carguen la página en una Tablet o un Smartphone no nos importa que se agrupen en 4 filas y 1 columna, tendremos que hacer lo siguiente:
.contenido {
background-color: #ccc;
height: 60px;
margin-top: 10px;
margin-bottom: 10px;
}<div class="container">
<div class="row">
<div class="col-md-3">
<div class="contenido"></div>
</div>
<div class="col-md-3">
<div class="contenido"></div>
</div>
<div class="col-md-3">
<div class="contenido"></div>
</div>
<div class="col-md-3">
<div class="contenido"></div>
</div>
</div>
</div>Sin embargo, si queremos las mismas columnas en Desktop, 2 filas y dos columnas en Tablet y 1 fila y 4 columnas en Smartphone deberemos hacer los siguiente:
.contenido {
background-color: #ccc;
height: 60px;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="contenido"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="contenido"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="contenido"></div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="contenido"></div>
</div>
</div>
</div>Nótese que para Tablets (sm) le pongo 6 columnas del grid, para que realmente en pantalla ocupe 2 columnas y tenga que saltar a otra fila a poner las otras dos. En Smartphone le pongo 12 columnas del grid, para que una fila ocupe toda la pantalla y sean 4 filas.
Dejo este último ejemplo para que lo echéis un vistazo. Os recomiendo que juguéis con el tamaño de la ventana para poder ver los efectos.
Columnas de anchos mixtos
Vamos con otro ejemplo. Supongamos que tenemos 2 div’s, y en el viewport que va desde los 992px a los 1.200px, queremos que tengan un un ancho del 50% cada uno. El viewport descrito corresponde a la clase .col-md-#. Lo ideal sería hacerlo así:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="contenido"></div>
</div>
<div class="col-md-6">
<div class="contenido"></div>
</div>
</div>
</div>Además, queremos que, en el viewport que va desde 1.200px en adelante (.col-lg-#), tengan un año de 33% y 66%. Tendríamos que añadir dos clases:
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="contenido"></div>
</div>
<div class="col-md-6 col-lg-8">
<div class="contenido"></div>
</div>
</div>
</div>También queremos que en las Tablets se vea con un 75% 25%. La correspondiente clase es .col-sm-#.
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 col-sm-9">
<div class="contenido"></div>
</div>
<div class="col-md-6 col-lg-8 col-sm-3">
<div class="contenido"></div>
</div>
</div>
</div>Y como el Grid está hecho con una filosofía Mobile-First, el formato para Smartphones, que serían dos filas con el 100% cada una, lo toma por defecto.
De nuevo os dejo el ejemplo, recordad jugar con el tamaño de la ventana del navegador para ver cómo cambia según los diferentes viewport.
Extendiendo el uso del Grid con .visible y .hidden
En Bootstrap 3 también tenemos herramientas para mostrar u ocultar contenidos dependiendo del tamaño del dispositivo y la resolución del viewport en el que estemos. Eso extiende aun más el uso eficiente del sistema Grid.
Para mostrar elementos basándose en el viewport usamos:
- .visible-xs
- .visible-xm
- .visible-md
- .visible-lg
Para ocultar elementos basándose en el viewport usamos:
- .hidden-xs
- .hidden-sm
- .hidden-md
- .hidden-lg
Espero que este post te ayude a iniciar tu proyecto desde cero, aunque faltan más cosas sobre el Grid estas son las básicas. Como siempre, si te ha gustado puedes compartirlo con tus contactos.
Un saludo y gracias.
Javier.