Bootstrap maneja una estructura basada en grillas o también conocida como Grid, lo cual no es más que una disposición en pantalla que nos ayuda a organizar nuestros elementos, es como si dividiéramos la pantalla en filas y columnas y la manejáramos como una gran tabla.
Este tipo de manipulación nos lleva a pensar en los diseños de una forma “única” y en el momento en que tengamos un poco más de experiencia utilizando Bootstrap empezaremos a ver todo de esta manera y así ganaremos consistencia y velocidad en nuestra forma de trabajo.
Lo primero que debemos saber es que este diseño del Grid nos permite trabajar de una forma que podemos implementar las vistas móviles de manera nativa, esto por supuesto a partir de la versión 3 de Bootstrap, gracias a que esta versión fue construida pensando en el diseño para móviles.
En versiones anteriores del framework había que especificar de forma directa las clases para que nuestro diseño tuviera la capacidad de ajustarse a resoluciones de dispositivos móviles, ahora ya las diferentes clases del Grid lo hacen de forma automática.
Para sacar provecho de esta característica, debemos pensar de pequeño a grande, es decir, las clases que apliquemos siempre deben pensarse como la más pequeña y luego esta escalará a otras resoluciones, es decir que si definimos una clase sm (small o pequeña), automáticamente Bootstrap asume que esa es la mínima expresión y que luego puede ir escalando a md (mediana) o a lg (grande).
Antes de pasar a ejemplos más prácticos debemos entender cuáles son las clases que podemos utilizar en las columnas de un Grid y además tenemos que saber para cual caso aplica cada uno, de esta forma cuando diseñemos nuestro sitio podremos tomar en cuenta al dispositivo más pequeño al que queremos llegar.
Con este enfoque podremos construir sitios Mobile Friendly, que tan importantes se están volviendo en la actualidad para los buscadores y sus resultados, ayudándonos así además de hacer buenos sitios a ganar algunos puntos en nuestra reputación SEO, con un mismo trabajo por supuesto.
Ya que sabemos la teoría detrás del sistema Grid de Bootstrap, es bueno empezar a hacer su aplicación práctica, pero antes de ver el código debemos entender un par de conceptos más, debemos siempre por convención y mejores prácticas utilizar un elemento con la clase container, ya que este nos creará el contenedor como su nombre lo indica para mantener nuestras diferentes columnas. El otro concepto que debemos saber es que siempre serán 12 columnas, por lo que las diferentes combinaciones que hagamos debemos tomar este número en cuenta.
En el siguiente ejemplo vamos a crear un código para una disposición en pantalla de 3 grandes columnas, vamos a utilizar la clase col-md- y como queremos 3 columnas iguales al dividir 12 entre 3 obtenemos el número 4 por lo que este será el tamaño de cada una de nuestras columnas resultantes.
Veamos sin más preámbulos el código:
![bootstrapAprendiendoManejarGridPant1.png]()
Si notamos, tenemos entonces 3 grandes columnas, pero que sucede cuando reducimos el tamaño a una resolución menor que la mínima de la clase aplicada, pues simplemente se van a apilar las columnas una sobre otra como vemos en la siguiente imagen:
![bootstrapAprendiendoManejarGridPant2.png]()
Aunque esto no es algo malo, a veces no es el comportamiento que deseamos que tome nuestro diseño, para ello podemos incluir los comportamientos directamente con clases para las diferentes resoluciones, veamos en el siguiente código como cambiamos las clases de las diferentes columnas para lograr un resultado diferente:
![bootstrapAprendiendoManejarGridPant3.png]()
Vemos que en el mismo tamaño del primer ejemplo, en vez de apilarse, las columnas A y B pasan a estar en la misma región, y la columna C toma una sola fila para ella sola. Aquí vemos la gran utilidad del Grid sobre todo con diseños que están enfocados a ser responsive y móviles.
Con esto finalizamos este tutorial, donde hemos aprendido cómo funciona el sistema de Grid de Bootstrap, por supuesto esto es solo la punta del iceberg, hay mucho más contenido que podremos explorar en otros tutoriales, pero con este conocimiento básico podemos empezar a ver como engranar nuestros diseños de una forma más lógica y con menos esfuerzo gracias al framework.
Este tipo de manipulación nos lleva a pensar en los diseños de una forma “única” y en el momento en que tengamos un poco más de experiencia utilizando Bootstrap empezaremos a ver todo de esta manera y así ganaremos consistencia y velocidad en nuestra forma de trabajo.
Mobile First
Lo primero que debemos saber es que este diseño del Grid nos permite trabajar de una forma que podemos implementar las vistas móviles de manera nativa, esto por supuesto a partir de la versión 3 de Bootstrap, gracias a que esta versión fue construida pensando en el diseño para móviles.
En versiones anteriores del framework había que especificar de forma directa las clases para que nuestro diseño tuviera la capacidad de ajustarse a resoluciones de dispositivos móviles, ahora ya las diferentes clases del Grid lo hacen de forma automática.
Para sacar provecho de esta característica, debemos pensar de pequeño a grande, es decir, las clases que apliquemos siempre deben pensarse como la más pequeña y luego esta escalará a otras resoluciones, es decir que si definimos una clase sm (small o pequeña), automáticamente Bootstrap asume que esa es la mínima expresión y que luego puede ir escalando a md (mediana) o a lg (grande).
Clases del Grid
Antes de pasar a ejemplos más prácticos debemos entender cuáles son las clases que podemos utilizar en las columnas de un Grid y además tenemos que saber para cual caso aplica cada uno, de esta forma cuando diseñemos nuestro sitio podremos tomar en cuenta al dispositivo más pequeño al que queremos llegar.
Con este enfoque podremos construir sitios Mobile Friendly, que tan importantes se están volviendo en la actualidad para los buscadores y sus resultados, ayudándonos así además de hacer buenos sitios a ganar algunos puntos en nuestra reputación SEO, con un mismo trabajo por supuesto.
Pantallas de Teléfonos
Es el dispositivo más pequeño que en teoría puede navegar en nuestro diseño, aunque las resoluciones de los teléfonos se han ido convirtiendo poco a poco en Full HD, esto es generalmente para los de la gama más alta, mientras que la gama media y la gama baja que en teoría es la mayoría mantienen resoluciones mucho más bajas. La clase de Grid que aplica para ese caso es: col-xs- y aplica para soluciones menores de ancho a 768 píxeles.
Pantallas de Tablets
Son en teoría el segundo dispositivo más pequeño, gracias a su mayor proporción de tamaño la tablet ofrece mayor superficie de navegación, por lo que podemos emplear un poco más de contenido que con una pantalla de teléfono, además que generalmente la navegación en tablets se hace de forma horizontal. La clase que aplica para este dispositivo es col-sm- y aplica para resoluciones con anchos mayores a 768 píxeles y menores a 992 píxeles.
Equipos de pantallas pequeñas
Son los pertenecientes generalmente a las gamas bajas de escritorio y laptops, pueden ser equipos de pantallas menores a 15 pulgadas, o que tienen más de 10 años de vida, también son las laptops que están destinadas a estudiantes y al sector de bajo poder adquisitivo, este es el sector mayoritario. La clase que aplica para este caso es col-md- y las resoluciones límites para el ancho son mayor a 992 píxeles y menor a 1200 píxeles.
Equipos de grandes pantallas
Aquí podemos encasillar a los equipos más modernos, y también las pantallas de más de 15 pulgadas, en esta categoría están entrando los nuevos equipos como las ultra portátiles, la resolución 4K, o la QHD también donde estamos viendo superficies mayores al 1080p. Por descarte los anchos que manejaremos acá son los mayores a 1200 píxeles, esto mientras sale la siguiente versión de Bootstrap probablemente.
Poniendo en práctica lo aprendido
Ya que sabemos la teoría detrás del sistema Grid de Bootstrap, es bueno empezar a hacer su aplicación práctica, pero antes de ver el código debemos entender un par de conceptos más, debemos siempre por convención y mejores prácticas utilizar un elemento con la clase container, ya que este nos creará el contenedor como su nombre lo indica para mantener nuestras diferentes columnas. El otro concepto que debemos saber es que siempre serán 12 columnas, por lo que las diferentes combinaciones que hagamos debemos tomar este número en cuenta.
En el siguiente ejemplo vamos a crear un código para una disposición en pantalla de 3 grandes columnas, vamos a utilizar la clase col-md- y como queremos 3 columnas iguales al dividir 12 entre 3 obtenemos el número 4 por lo que este será el tamaño de cada una de nuestras columnas resultantes.
Veamos sin más preámbulos el código:
<!DOCTYPE html><html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <title>Bootstrap Grid</title></head><body> <div class="container"> <h1>El Grid de Bootstrap</h1> <p>Ejemplo de como utilizar las columnas en bootstrap</p> <div class="row"> <div class="col-md-4"> <h2>Columna A</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. </div> <div class="col-md-4"> <h2>Columna B</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. </div> <div class="col-md-4"> <h2>Columna C</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. </div> </div> </div> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>La estructura es muy sencilla, hemos creado un div con la clase container, y dentro un div con la clase row finalmente dentro de este último hemos creado 3 divs con la clase col-md-4 esta es la clase para pantalla pequeñas para equipos no pórtatiles, y vemos como le acuñamos el número 4, lo que indica que cada div de estos equivale a 4 columnas del Grid. Veamos como luce, cuando ejecutamos en nuestro navegador:
Si notamos, tenemos entonces 3 grandes columnas, pero que sucede cuando reducimos el tamaño a una resolución menor que la mínima de la clase aplicada, pues simplemente se van a apilar las columnas una sobre otra como vemos en la siguiente imagen:
Aunque esto no es algo malo, a veces no es el comportamiento que deseamos que tome nuestro diseño, para ello podemos incluir los comportamientos directamente con clases para las diferentes resoluciones, veamos en el siguiente código como cambiamos las clases de las diferentes columnas para lograr un resultado diferente:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <title>Bootstrap Grid</title></head> <body> <div class="container"> <h1>El Grid de Bootstrap</h1> <p>Ejemplo de como utilizar las columnas en bootstrap</p> <div class="row"> <div class="col-md-4 col-sm-6"> <h2>Columna A</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. </div> <div class="col-md-4 col-sm-6"> <h2>Columna B</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. </div> <div class="col-md-4 col-sm-12"> <h2>Columna C</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilisis mi in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. </div> </div> </div> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>Ahora si notamos en nuestro código todo se mantiene igual a excepción de nuestras clases, donde para las columnas A y B hemos añadido la clase col-sm-6 y para la columna C la clase col-sm-12, esto quiere decir que cuando se reduzca la resolución pasará a regir las clases sm, como vemos en la siguiente imagen:
Vemos que en el mismo tamaño del primer ejemplo, en vez de apilarse, las columnas A y B pasan a estar en la misma región, y la columna C toma una sola fila para ella sola. Aquí vemos la gran utilidad del Grid sobre todo con diseños que están enfocados a ser responsive y móviles.
Con esto finalizamos este tutorial, donde hemos aprendido cómo funciona el sistema de Grid de Bootstrap, por supuesto esto es solo la punta del iceberg, hay mucho más contenido que podremos explorar en otros tutoriales, pero con este conocimiento básico podemos empezar a ver como engranar nuestros diseños de una forma más lógica y con menos esfuerzo gracias al framework.
