Close Menu
Código Simples .NETCódigo Simples .NET
    Facebook X (Twitter) Instagram
    Trending
    • System Design: da teoria à prática
    • Pessoas e Processos: o fator humano por trás da arquitetura de sistemas
    • Observabilidade e Operações: dando olhos e mãos ao sistema
    • Performance e Custo: otimizando o que realmente importa
    • Padrões de Arquitetura e Organização: quando o design encontra a realidade
    • Confiabilidade e Consistência: construindo sistemas que não quebram sob pressão
    • Bancos de dados e armazenamento: onde moram os gargalos
    • Fundamentos que nunca mudam: 5 princípios práticos de System Design
    Facebook X (Twitter) Instagram
    Código Simples .NETCódigo Simples .NET
    Código Simples .NETCódigo Simples .NET
    Home»Front-End»Layout de 5 colunas com Bootstrap

    Layout de 5 colunas com Bootstrap

    Jhonathan SoaresBy Jhonathan Soares31 de março de 20151 Min Read Front-End
    Share
    Facebook Twitter LinkedIn WhatsApp Copy Link

    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! 🙂

    Share. Facebook Twitter LinkedIn Telegram WhatsApp Copy Link
    Jhonathan Soares
    • Website
    • Facebook
    • X (Twitter)
    • LinkedIn

    Criador do blog Código Simples e com mais 15 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.

    Posts Relacionados

    Happy Hour com Dados #17 – Azure vs AWS vs GCP

    Front-End 26 de maio de 20211 Min Read

    Blazor .NET – CRUD com MongoDB

    C# Front-End NoSql 2 de janeiro de 20195 Mins Read

    Introdução ao Blazor, o SPA da Microsoft

    C# Front-End 29 de dezembro de 20185 Mins Read
    Newsletter

    Digite seu endereço de e-mail para receber notificações de novas publicações por e-mail.

    Junte-se a 25mil outros assinantes
    Posts recentes
    • System Design: da teoria à prática
    • Pessoas e Processos: o fator humano por trás da arquitetura de sistemas
    • Observabilidade e Operações: dando olhos e mãos ao sistema
    • Performance e Custo: otimizando o que realmente importa
    • Padrões de Arquitetura e Organização: quando o design encontra a realidade
    Categorias
    • Arquitetura (27)
      • Microsserviços (2)
      • Testes (2)
    • Asp.net (120)
      • C# (89)
      • Mvc (13)
    • Banco de dados (92)
      • NoSql (59)
      • Sql (38)
    • Boas práticas (33)
      • Gestão & Produtividade (3)
      • Metodologias Ágeis (6)
    • Cursos (52)
    • Dicas (105)
    • Front-End (92)
    • IA (4)
    • Linux (6)
    • NodeJS (4)
    • Post do Leitor (9)
    • Python (5)
    • Seo (12)
    • Tecnologia (30)
      • ITIL (1)
      • Padrões de Projeto (4)
    • Testes (2)

    VEJA TAMBÉM

    Testes
    28 de fevereiro de 20254 Mins Read

    30 APIs Gratuitas para desenvolvedores

    APIs são ferramentas essenciais para desenvolvedores que querem criar aplicações mais eficientes, conectadas e funcionais sem reinventar a roda. Desde dados abertos, notícias em tempo real e inteligência artificial até esportes e clima, há APIs gratuitas que oferecem vastas possibilidades de integração. Este artigo apresenta 30 APIs gratuitas que podem acelerar o desenvolvimento e abrir novas oportunidades para projetos inovadores.

    1000 livros gratuitos sobre programação!

    Facebook X (Twitter) Instagram LinkedIn

    Type above and press Enter to search. Press Esc to cancel.

    Vá para versão mobile