En este artículo voy a explicarte como realizar una grilla de 5 columnas dentro de un template de Bootstrap (algo que no viene por defecto)
Si te dedicas a la maquetación web o al desarrollo front-end como me dedico yo, estimo que ya usarás este gran framework llamado Bootstrap, el cual te ahorra horas de escritura de código.
(Si aun no conoces Bootstrap, te invito a mi sitio http://aprendebootstrap.com/ )
Bootstrap en si, trae un sistema de grillas responsive muy bueno con el que puedes maquetar casi cualquier tipo de sitio web.
Pero de vez en cuando se presenta algún proyecto donde hay que salir un poco de los standard, y este es el caso de las 5 columnas.
De fabrica, Bootstrap no viene preparado para diagramar una estructura de grilla de 5 columnas, es por eso que aquí te explica fácilmente como hacerlo.
Para esto necesitas agregar algunas clases CSS que básicamente lo que hace es aplicar un ancho de columna del 20%, con lo cual en el ancho del 100% nos da las 5 columnas buscadas.
Primero definimos 4 nuevas clases con un ancho del 20% :
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15
{
position: relative;
min-height: 1px;
}
.col-xs-15
{
width: 20%;
float: left;
}
Luego por medio de los mediaqueries definimos como se comportará dicha grilla en los diferentes dispositivos y resoluciones de pantalla:
@media (min-width: 768px)
{
.col-sm-15
{
width: 20%;
float: left;
}
}
@media (min-width: 992px)
{
.col-md-15
{
width: 20%;
float: left;
}
}
@media (min-width: 1200px)
{
.col-lg-15
{
width: 20%;
float: left;
}
}
De esta forma entonces, cuando quieras armar una grilla a 5 columnas, trabajas normalmente en Bootstrap aplicando a cada columna la clase .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 según lo desees.
Por ejemplo:
<body> <div class="col-md-15"> Tu contenido aqui </div> <div class="col-md-15"> Tu contenido aqui </div> <div class="col-md-15"> Tu contenido aqui </div> <div class="col-md-15"> Tu contenido aqui </div> <div class="col-md-15"> Tu contenido aqui </div>
Así de simple, espero que sea útil a tus proyectos.
Si te interesan los templates en Bootstrap
te invito al siguiente articulo:
22 templates de bootstrap para diseñadores
DESCARGA DE CODIGO:
Descarga el código Bootstrap para usarlo en tus páginas:
[sociallocker id=»2711″]
[/sociallocker]
Si quieres aprende mas sobre Bootstrap y convertirte en un experto, te invito a mi Curso completo de Bootstrap 3 donde aprenderás a maquetar sitios web en minutos utilizando este framework.
Saludos!
Cristian
Hola Cristian, excelente ejemplo.
Estoy intentando hacer lo mismo pero en Bootstrap 2 y no lo consigo
¿Me ayudas?
Mi código (que he metido en un css aparte) es:
.span15
{
position: relative;
min-height: 1px;
}
.span15
{
width: 20%;
float: left;
}
@media (min-width: 768px)
{
.span15
{
width: 20%;
float: left;
}
}
@media (min-width: 992px)
{
.span15
{
width: 20%;
float: left;
}
}
@media (min-width: 1200px)
{
.span15
{
width: 20%;
float: left;
}
}
¿Qué hago mal?
Este código me funciona perfectamente en escritorio pero en dispositivos mobiles no, como hago este código responsive
Maritza no te van a servir 5 columnas en movil, es solo para desktop. Fijate que la primer mediaquerie es ‘@media (min-width: 768px)’, o sea a partir de una resolucion de 768px como minimo.
Hola! he llegado aquí justo buscando esta info, muchas gracias, se que es un posteo de hace un tiempo pero es muy útil.. Ahora un comentario, me parece que en este punto:
.col-xs-15
{
width: 20%;
float: left;
}
Debería ser:
.col-xs-15
.col-sm-15,
.col-md-15,
.col-lg-15
{
width: 20%;
float: left;
}
Porque sino no toman los otros tamaños el 20% de ancho y en el caso de aplicar por ejemplo col-md-15, quedarán una abajo de la otra. Qué opinas?
Saludos!
Claro, cuando defines col-xs q seria para movil, y no aclaras ningun tamaño mayor, toma para todos los anchos el mismo q el de XS.
Saludos!