Layout de cinco columnas en Bootstrap 2

Es muy probable que este post sirva de utilidad a pocas personas, pero me ha parecido interesante comentarlo aquí por si alguien sigue utilizando Bootstrap 2 y se ha encontrado con la problemática de crear una rejilla de cinco columnas para presentar sus diseños.

Como sabéis Bootstrap permite un layout de hasta 12 columnas, y permite ir jugando con columnas que completen dicho layout de 12 columnas repartidas a nuestro antojo, todo ello de forma responsive.

El problema se presenta cuando necesitamos construir una grilla de 5 columnas, algo que no viene solucionado por defecto en Bootstrap.

A continuación os dejo cómo lo he solucionado yo, leyendo por la red varias formas de conseguirlo. Os dejo la que me ha parecido más sencilla, aprovechando el span2 que viene por defecto en Bootstrap:

• Lo primero de todo es crearse un documento CSS independiente con el siguiente contenido (yo lo he llamado cincocolumnas.css):

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

• Cargamos el archivo CSS que hemos creado en nuestra web, teniendo muy presente que debe cargarse después del CSS original de Bootstrap:

• Creamos nuestro contenido HTML de la siguiente forma:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Contenido 1</h2>
        <p>Desarrollo del contenido 1.</p>
        <p><a class="btn" href="#">Ver más 1</a></p>
    </div>
    <div class="span2">
        <h2>Contenido 2</h2>
        <p>Desarrollo del contenido 2.</p>
        <p><a class="btn" href="#">Ver más 2</a></p>
    </div>
    <div class="span2">
        <h2>Contenido 3</h2>
        <p>Desarrollo del contenido 3.</p>
        <p><a class="btn" href="#">Ver más 3</a></p>
    </div>
    <div class="span2">
        <h2>Contenido 4</h2>
        <p>Desarrollo del contenido 4.</p>
        <p><a class="btn" href="#">Ver más 4</a></p>
    </div>
    <div class="span2">
        <h2>Contenido 5</h2>
        <p>Desarrollo del contenido 5.</p>
        <p><a class="btn" href="#">Ver más 5</a></p>
    </div>
</div>

Después de dar varias vueltas, es la solución que me ha parecido más sencilla de implementar.

¿Qué os parece? ¿Lo habéis hecho de otra forma que os parezca más sencilla?

Espero vuestros comentarios.

Carlos Useros Raboso

Ingeniero Técnico en Informática de Gestión por la Universidad Politécnica de Madrid.
Creador de Inforedsocial.es, blog dedicado a presentar noticias sobre Social Media.
En carlosuseros.inforedsocial.es hablo sobre diseño web y gráfico.
Rock, Motos, Social Media, Diseño Web… asombrable por naturaleza

www.inforedsocial.es