Hoy en día cualquier maquetador y/o desarrollador front-end conoce o debería conocer el famoso framework Bootstrap.
Uno de los puntos principales y fundamentales de este framework es su potente sistema de grillas responsive, con el que podemos maquetar casi cualquier tipo de página web.
Esta rejilla, por defecto, viene preparada para 12 columnas, por lo que nos podemos maquetar diseños de 12, 6, 4, 3, 2 y 1 columna, pero nos encontraremos con algún caso en el que el diseño nos pide 5 columnas, lo cual Bootstrap no lo contempla y necesitaremos hacerlo nosotros de forma manual con algunas clases CSS.
Explicado de forma rápida, lo único que tendremos que hacer es agregar algunas clases CSS con las que que poder aplicar a la columna un 20% de ancho, con lo que sobre el 100% obtendremos las 5 columnas deseadas.
A continuación mostramos las clases necesarias:
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5 {
min-height: 1px;
position: relative;
}
.col-xs-5 {
float: left;
width: 20%;
}
Para controlar el comportamiento en las distintas resoluciones y dispositivos necesitaremos añadir algunas mediaqueries:
@media (min-width: 768px) {
.col-sm-5 {
float: left;
width: 20%;
}
}
@media (min-width: 992px) {
.col-md-5 {
float: left;
width: 20%;
}
}
@media (min-width: 1200px) {
.col-lg-5 {
float: left;
width: 20%;
}
}
Simplemente con esto ya podremos empezar a utilizar Bootstrap con grillas de 5 columnas usando las clases que hemos definido anteriormente: .col-xs-5, .col-sm-5, .col-md-5 y .col-lg-5.
Espero que os resulte útil.