Layout de 5 colunas com Bootstrap

0

Por padrão Bootstrap não fornece sistema de grid, que nos permite criar cinco colunas no layout, mas como você pode ver que é bastante simples criar uma personalização do grid para fazê-lo.
Em primeiro lugar você precisa para criar a definição de coluna padrão na forma como Bootstrap faz. Eu criei para minhas colunas a nomenclatura –  col -..- 15.

Veja o meu código:

/*Declaração inicial*/

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

/*Medias queries */

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

Agora basta adicionar no seu HTML

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Muito simples não é mesmo? Um abraço! 🙂

Compartilhe.

Sobre o autor

Criador do blog Código Simples e com mais 9 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist. Atuando em funções analista, desenvolvedor, arquiteto, líder técnico e gestor de equipes. Mais informações em : http://jhonathansoares.com