Hacer 5 columnas con Bootstrap

Hola lechugas!

Como hoy tenemos poco tiempo vamos ha mostraros un truco para maquetar que os puede venir muy bien.

Lo que os comentamos es como hacer 5 con el framework Bootstrap de Twitter.

Por defecto este framework no provee un sistema de columnas en el que esté contemplado el hacer 5 columnas, ya que todos los divisores de columnas son factores de 12 (que son 3, 2 y 1). Con las combinaciones de ambos podemos hacer las columnas que se quieran, pero faltarían los factores primos 5, 7 y 11 (también el 10, que viene a través de 2 * 5, pero como el 5 no está contemplado…).

Bueno, os dejamos un sencillo truco para añadir al css y poder dividir vuestra pantalla en cinco columnas perfectas usando Bootstrap:

 

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15
{
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}
.col-xs-15
{
	width: 20%;
	float: left;
}

@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;
	}
}

 

 

Esperamos que, como siempre, os sea útil!

6 comentarios en “Hacer 5 columnas con Bootstrap

  • Fuiste muy rapido al crear el post… Para quienes no entendieron primero debes hacer los siguientes paso
    1.- si deseas hacer 5 columnas divides 100 / 5 = 20%
    2.- si deseas hacer 7 columnas divides 100 / 7 = 14.2857142857%
    entonces en el caso de 7 el css quedaria de la siguiente forma

    .col-xs-17,
    .col-sm-17,
    .col-md-17,
    .col-lg-17 {
    position: relative;
    min-height: 1px;
    max-height: 100%;
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-right: 10px;
    padding-left: 10px;
    }
    .col-xs-17 {
    width: 14.2857142857%;
    float: left;
    }
    @media (min-width: 768px) {
    .col-sm-17 {
    width: 14.2857142857%;
    float: left;
    }
    }
    @media (min-width: 992px) {
    .col-md-17 {
    width: 14.2857142857%;
    float: left;
    }
    }
    @media (min-width: 1200px) {
    .col-lg-17 {
    width: 14.2857142857%;
    float: left;
    }
    }

    aplicándolo en tu website

    Espero que le hallan servido de complemento el comentario.

    • Muy buenas,
      Primero, gracias por el aporte mostrando como hacer las 7 columnas.

      Por otro lado, es posible que tengas razón y diésemos por sentado algunas cosas, ya que pensábamos que eran muy sencillas y se sobrentendían.

      • Muy buenas Carlos,
        Voy a intentar contestarte. A ver si te ayuda en algo la respuesta.

        Lo primero que hay que tener en cuenta es que el actual Bootstrap (hablamos del 3, aunque está casi casi fuera del horno el 4), como otros frameworks de diseño, lo que hacen es dividir el ancho en 12 columnas. Por lo tanto ahora trabajan con porcentajes de pantalla.

        El problema que presenta el antiguo Bootstrap, es decir, la versión 2, es que las clases de CSS que indicaban el ancho lo hacían de forma fija, hasta un máximo de 940px.

        Por lo tanto tenemos 2 opciones:
        La primera es hacer 5 columnas y meterle un offset a la izquierda.
        Estas cinco columnas no ocuparían el total del ancho permitido de pantalla, pero serían 5 columnas centradas.

        ¿Cómo lo haríamos?
         

         

        Utilizamos span2 porque tiene un ancho de 140px. La siguiente opción es span3 que son 220px por cada uno, y siendo 5 harían 1100px. Más que el máximo, que hemos dicho eran 940px.

        La otra opción es crear una clase que ocupe la quincuagésima parte del máximo, o lo que es lo mismo 940px / 5 = 188px.
        Después sólo deberías de aplicar ésta a los elementos que te interese.

        .span5-full
        {
            width: 188px;
        }
        

        Espero que alguna de las dos soluciones te sea útil, pues todo es en teoría. No lo hemos probado.
        Ya nos cuentas!

        Un saludo,

        Fran.

Deja un comentario