Seleccionar página

Bootstrap es probablemente el framework más importante para CSS actualmente. Nos facilita la vida de una manera brutal a los que tenemos que diseñar webs, sobre todo si queremos que sean responsive, es decir, que sean bien visibles en todos los navegadores.

Hoy veremos lo sencillo que es organizar nuestro contenido en columnas, utilizando clases propias de Bootstrap y sin tener que preocuparnos por tamaños en absoluto.

Lo primero: Bootstrap

Obviamente, hay que incluir Bootstrap en nuestro código, si no, no sirve nada de lo que hagamos. Podemos descargarlo aquí, añadirlo a nuestros archivos y luego lo incluiremos en el <head> de nuestro código HTML. Si no queremos descargarlo, siempre podemos enlazar las librerías públicas.

Las clases col de Bootstrap

Lo primero que tenemos que tener en mente es que Bootstrap divide nuestro espacio en múltiplos de 12. Así, cuando declaramos un contenedor, pensemos en él como un rectánguo que tiene 12 partes. Esto nos ayudará a visualizarlo cuando queramos hacer columnas.

Si queremos hacer un contenedor de dos columnas, lo primero que haremos será declarar un div con clase .row. Este div es un contenedor de los que ya hemos dicho que se dividen en 12 partes. Dentro de él, declararemos dos div más, esta vez, de clase .col-md-6.

¿Qué hemos hecho con esto? Usar las clases col-md. Bootstrap tiene declaradas y configuradas las clases col-md de la 1 a la 12. Usando el número que queramos, podemos establecer columnas de forma automática, sin preocuparnos de nada más.

Entonces, para una distribución de tres columnas, usaríamos col-md-4.

Para una distribución de cuatro columnas, .col-md-3. Para una distribución de seis columnas, .col-md-2. Y así podemos combinar los col-md como queramos.

Por ejemplo, podríamos querer una distribución de tres columnas, donde la primera ocupe el 50% del ancho de .row. En este caso, por simple suma, 6+3+3 = 12:

Y nuestra primera columna queda más ancha.

Otras clases de columnas

Bootstrap no solo implementa la clase .col-md. Hay otras, que se refieren a distintos tamaños: col-lg, col-sm- col-xs…

La diferencia entre ellas es que en resoluciones menores a 768px de ancho, la mayoria de las columnas definidas con estas clases pasan a apilarse una sobre otra, para que el contenido sea visible en móviles (las tres columnas pasan a ser una sola, una debajo de otra). Sin embargo, si usamos col-xs, el contenido seguirá mostrandose en columnas, aunque la pantalla sea menor.