Publicado em

Bootstrap 3: Criando Layouts e Grids

layout-com-bootstrapNeste artigo, você vai entender como funciona o principal conceito do Bootstrap, que é o Grid System.

Vamos ver, também, alguns dos principais itens e conceitos como container, rows, e columns.

Depois, você pode ver como fazer os quatro principais tipos de layout com o Bootstrap:

Mas, antes de começar, você precisa conhecer algumas regras que o Bootstrap tem para poder posicionar os elementos no layout, e utilizar o framework da melhor forma possível.


Entendendo o Grid System do Bootstrap

Primeiramente, você precisa saber que o Bootstrap funciona com um sistema de grids (grades) para posicionar os elementos na página.

Esse mecanismo funciona como uma espécie de tabela abstrata, e é responsivo (responsive), orientado a dispositivos móveis (mobile first) e se ajusta de acordo com a tela (fluid), quando ela muda de tamanho ou de orientação.

É extremamente importante que você entenda, e domine, esse grid system para trabalhar bem com o Bootstrap.

Vamos ver, agora, alguns conceitos importantes antes de começar a criar os nossos layouts.


Mobile First

O Bootstrap é Mobile First.

Isso quer dizer que o framework assume, inicialmente, que a tela é de um dispositivo móvel, com tamanho pequeno. Assim, ele adapta todos os conteúdos para o tamanho menor.

Depois, ele verifica o tamanho real da tela e vai ajustando os itens para que fiquem posicionados corretamente, conforme o tamanho e a resolução.

Quando você for projetar, e implementar, o layout e o design do site (ou app) você deve projetar primeiro para as telas menores (celulares), depois para telas médias (tablets) e, por fim, para telas maiores (desktops, etc.).

Isso é a base do conceito de Mobile First.


Container

No Bootstrap, existe o conceito de container.

O container é uma div, que garante que o seu layout vai ficar alinhado na página, e com margens para as laterais. Ele também centraliza o conteúdo na tela do browser. Dependendo do tamanho da tela, o container definirá automaticamente as larguras do seu layout, para que o conteúdo seja melhor visualizado.

Você deve usar um container para englobar o posicionamento de todos os elementos do layout da página.

Então, dependendo do dispositivo e da orientação tela, o seu container pode ficar com o tamanho de acordo com a tabela abaixo:

Em Celulares Em Tablets Desktops Telas Grandes
Largura Automática Largura Máx. de 750px Largura Máx. de 970px Largura Máx. de 1170px

Para criar um container com largura fixa, e ajustada ao tamanho da tela, você pode criar uma div com a classe .container, como no exemplo:

<div class"container">
...
</div>

Ou, você pode usar a classe .container-fluid para fazer o container (e o layout) ficar com 100% de largura:

<div class"container-fluid">
...
</div>

A sua página deve ter, pelo menos, um container geral (também conhecido como wrapper). Ele abrange todo o escopo da página. E todos os outros elementos visuais da página devem estar dentro dele.

Há situações em que você poderá (e precisará) usar o container dentro de áreas como o header e o footer.


Row

As rows (linhas), no Bootstrap, definem as divisões horizontais do seu layout.

Essas rows devem ficar dentro do container, e podem ser aplicadas a qualquer tag que defina estrutura, como div, header e footer.

Para criar uma row você pode definir uma div com a classe .row, como no exemplo:

<div class"container">
    <div class="row">
    ...
    </div>
</div>

Seu layout pode ter quantas rows forem necessárias. E você pode colocar rows dentro de rows, também.

As rows sempre irão ficar uma abaixo da outra.


Columns

As columns (colunas), no Bootstrap, definem as divisões verticais das rows (linhas) do seu layout.

Columns devem estar sempre dentro das rows, e elas definem espaços na row para que você coloque os itens visuais ou conteúdos que foram projetados.

Então, no Bootstrap, você tem linhas (rows) e colunas (columns) para definir um layout. É, exatamente, como uma grade ou matriz (ou tabela), porém, utilizando div’s com classes.

Para criar uma column você pode criar uma div com os prefixos pré-definidos pelo Bootstrap, como no exemplo:

<div class"container">
    <div class="row">
        <div class="col-md-6"> </div>
        <div class="col-md-6"> </div>
    </div>
</div>

Neste exemplo, temos uma linha (.row) com duas colunas (.col-md-6).

O número seis, no final de cada classe de coluna, define o espaço que ela ocupa na linha. Assim, neste exemplo, teríamos a linha (row) dividida exatamente no meio por duas colunas, já que usamos o número seis.

Os prefixos de colunas servem para indicar em quais tipos de tela a coluna vai se manter posicionada como no design principal. Os prefixos têm o seguinte padrão:

Para Celulares Para Tablets Para Desktops Para Telas Grandes
 .col-xs-* .col-sm-* .col-md-* .col-lg-*

Você deve substituir os asteriscos pelo tamanho da coluna (de 1 a 12).

O mais comum é utilizar o prefixo .col-md-* para os sites e web apps, porque ele mantém o design principal em computadores e nos principais tablets. Apenas nos celulares o conteúdo passa a ficar vertical, ou seja, “um embaixo do outro” em uma única coluna.

Agora, eu vou lhe explicar o “pulo do gato” do Bootstrap:

A soma dos tamanhos das colunas deve ser igual a doze (ou menor).

No exemplo, nos tínhamos a seguinte soma:

<div class="row"> <!-- 6 + 6 = 12 -->
    <div class="col-md-6"> </div>
    <div class="col-md-6"> </div>
</div>

Mas, você pode fazer qualquer combinação:

<div class="row"> <!-- 4 + 8 = 12 -->
    <div class="col-md-4"> </div>
    <div class="col-md-8"> </div> 
</div>
<div class="row"> <!-- 3 + 6 + 3 = 12 -->
    <div class="col-md-3"> </div>
    <div class="col-md-6"> </div>
    <div class="col-md-3"> </div>
</div>
<div class="row"> <!-- 10 + 2 = 12 -->
    <div class="col-md-10"> </div>
    <div class="col-md-2"> </div>
</div>

O importante é que, no final, a soma dê 12. Se a soma der mais de 12 em uma linha, as colunas excedentes serão posicionadas em uma nova linha, abaixo da atual.

É muita coisa, né?! Tudo isso que vimos até agora serve apenas para criar o grid system do Bootstrap…


Grid System, ou o Bootstrap Grid…

O Bootstrap tem um mecanismo de grades (Grid System) para calcular as posições dos itens na tela.

Esse grid system é responsivo, mobile first e flexível. Ele pode aumentar, ou diminuir, conforme a tela mude (ou o viewport). Para isso, ele usa aquelas classes e conceitos que você viu anteriormente, além de algumas combinações para gerar layouts mais semânticos.

Veja um exemplo de grid do Bootstrap:

Neste exemplo temos o seguinte:

  • cada linha cinza-escuro é uma row, ou seja, uma div com a class=”row” (mas pode ser qualquer outra tag de estrutura)
  • cada item dentro das rows é uma column, ou seja, uma div com um prefixo de coluna (class=”col-md-1″, como na primeira linha por exemplo)

A primeira linha tem doze colunas de tamanho unitário (12 * 1 = 12). A segunda tem três colunas de tamanho quatro (3 * 4 = 12).  A terceira tem duas colunas de tamanho 6 (2 * 6 = 12).  A quarta tem uma columa de tamanho doze (1 * 12 = 12).  E a última tem uma coluna de tamanho 3 (1 * 3 < 12).

Acho que você conseguiu visualizar, agora.

Lembre-se que o grid system padrão do Bootstrap utiliza 12 colunas para criar o container (é possível mudar isso, criando uma build personalizada do Bootstrap).

Para adaptar um design de website, ou de web app, ao Bootstrap você pode pegar o projeto desse design e dividir em 12 partes iguais verticalmente. Depois, basta fazer os ajustes necessários para que a estrutura se encaixe no grid.

O maior benefício disso é que deixa os layouts matematicamente corretos, e flexíveis para qualquer tamanho de tela.

Vamos ver, agora, como fazer os layouts mais comuns com o Bootstrap…


Como Criar Layouts com o Bootstrap

Agora que você já conhece os conceitos iniciais, já é possível começar a escrever a marcação de layouts com o Bootstrap.

Para que este tutorial não fique mais extenso, e que você não fique confuso com os conceitos do Grid System, eu separei os principais tipos de layout para você aprender.

Estes tutoriais são passo-a-passo:

bootstrap-template-layout-simples
Como Criar um Layout Simples
Como Criar um Layout de Duas Colunas
Como Criar um Layout de Duas Colunas
Como Criar um Layout de Três Colunas
Como Criar um Layout de Três Colunas

Estude eles, e tente implementar a marcação. Vai facilitar, e muito, seu entendimento do Grid do Bootstrap.

Outros Layouts

É possível criar diversos tipos de layouts usando as combinações de rows, columns e classes de prefixo.

Tudo depende de um bom protótipo e da marcação correta para encaixar os itens no grid system do Bootstrap.


Próximos Passos…

A partir daqui, você conseguirá criar várias coisas com o Bootstrap. Lembre-se de sempre consultar a documentação para ver as possíveis classes do framework.

Aproveite para conferir os outros tutoriais de Bootstrap aqui da Academy. Se ficou alguma dúvida é só deixar abaixo nos comentários.

Até a próxima!

58 comentários sobre “Bootstrap 3: Criando Layouts e Grids

  1. No caso então se eu precisar fazer um site que seja para todas as telas, terei que usar da seguinte forma (declarar os tips de telas )??

    <div class="col-md-4-col-xs-4-col-sm-4-col-lg-4 " .. tudo isso numa linha em todas as divs ?? puxando apenas o arquivo css ele já não faz isso ??

    1. Não. Para todas as telas você usaria apenas o “col-xs-*”, que deixaria o layout igual até para celulares.

      Mas, isso não é muito indicado por causa da navegação nos celulares. O melhor mesmo é usar o “col-md-*” que abrange a maioria das telas, e deixa o layout próprio para celulares.

    2. Melhor voce definir em seu css o layout para cada tamanho de resolução. Fica mais organizado e adaptavel a varios tamanhos de tela. Exemplo:
      @media (max-width: 768px) , @media (mix-width: 800px) e entao definir seu estilo para determinada resolucao.

      1. Ruan quando voce irá dar continuidade no projeto de bootstrap, gostaria muito de saber se voce poderia fazer um vídeo explicando como fazer aquele sisteminha de veículas que tem no seu site,,, de exemplo

  2. Olá, tem mais aulas desse seu tutorial de bootstrap 3, gostei muito da sua didática e ate agora que eu achei na net um tutorial digno de se ver, entao gostaria muito de saber se tem a continuaçao, se tiver por favor me envie o link

    1. Obrigado, José!
      Estou escrevendo uns tutoriais novos. Assim que estiver publicado, envio para você.
      Abs.

      1. e certo fazer um site usando só a classe row sem colunas ? e o msm se adapta em todas as rosoluções ?

  3. Demais o seu tutorial, me tirou varias dúvidas. Estou aguardando pelos próximos. Grande abraço e continue assim.

    1. Obrigado, Rodrigo!
      Fico feliz por ter ajudado.

  4. O melhor conteúdo que encontrei até agora a respeito do Bootstrap.

    Muito bem explicado e direto ao ponto (importantíssimo).

    Parabéns.

  5. Parabéns pelos tutorias e gostaria de saber quando terá continuidade, estou começando estudar python e vi que ele também usa o bootstrap, então gostaria de unir o útil ao agradável e estudar os dois ao mesmo tempo…
    Parabéns!!!

  6. Entao sidnei..eu tbm estou estudando um pouco de python..você deve estar usando algum framework que utiliza python, eu to vendo uns videos que usa o web2py..to curtindo..eu queria pegar mais profundo a parte de bootstrap…
    Se quiser mando o link do curso que estou vendo..

    1. Nossa Fabiano foi mal, nem lembrava mais que tinha postado algo aqui… sim estava usando Django com o Pycharm no curso, mas infelizmente o treinamento na empresa não continuou, se ainda puder mande o link que vs estava acompanhando vou voltar a estudar ele novamente…

  7. SIMPLESMENTE FANTÁSTICO SEUS TUTORIAIS. DEUS ABENÇOE VOCÊ. POR FAVOR, POSTE MAIS TUTORIAIS ASSIM, TEM AJUDADO MUITO.

    1. Obrigado, Alex!
      Espero que você continue acompanhando…

  8. e certo fazer um site so com a classe row sem coluna ?, e o msm site se adapta em todas as resoluções ?

    1. Sim, pode ser feito. Mas, você pode perder alguns espaçamentos.
      Para se adaptar em resoluções você deve usar a classe container, numa div superior.

  9. Olá Ruan, parabéns pelo tutorial, está muito bacana.

    Eu tenho uma dúvida cabulosa. É o seguinte, eu queria criar uma pagina dividida em dois blocos (A e B), cada bloco com suas colunas. nas telas maiores A ficaria ao lado de B e em telas menores A ficaria em cima de B).

    nessa lógica aqui
    http://i.imgur.com/22eWhZg.jpg

    Eu não consegui fazer isso, será que tem como?

    1. É possível sim, Everton. Se eu entendi corretamente, você vai precisar ter duas divs com dois tipos de classes do Bootstrap. Mais ou menos assim:

      Assim, quando a tela for média ou grande, as divs ficam com 50%, lado a lado.
      Quando for tela pequena, as divs ficam 100%, uma sobre a outra.

      Obrigado pela visita!
      Ruan

  10. Oi Ruan,

    Criei uma .row
    Dentro dessa row estou querendo criar 5 colunas. Usei col-md-2
    Somando, temos 10.
    Me restou 2.
    Esse 2 eu queria usar para espaçamento de uma coluna para outra, como faço isso?

    Abraços

    1. A solução mais fácil pra isso seria colocar uma coluna col-md-1 no início, depois as col-md-2, e no fim uma coluna col-md-1. A soma daria 12.

      A outra forma, seria customizar o Bootstrap todo para usar um grid múltiplo de 5 (como 10 ou 15 cols), e usar as 5 colunas de tamanho 3. Mas pra isso vc precisaria criar uma versão personalizada pelo site.

      Abs.

      1. Utilize col-xs-12 col-sm-12 col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1, isso fará ter um espaço de cada lado.

  11. Muito bom, eu estava utilizando o Maerializecss por causa do Material Design, mas este é um framework muito pesado, vou migrar pro Bootstrap, valeu mesmo 😀

  12. Muito bom! Tem pretensão/previsão de continuar com esta série?

    1. Sim, com certeza. Falta só um pouco de tempo.

      Tens alguma sugestão de tutorial?!

  13. Parabéns pelo Tutorial,

    Ruan, tenho uma duvida. Estou querendo montar um layout para sistema web e gostaria de saber se tem como utilizar esse tipo de layout que vc abordou no tutorial para trabalhar semelhante ao antigo frameset, Pergunto usando como parâmetro o frameset pois nele quando criamos a pagina de menu, por exemplo, setamos nos link a target de onde as paginas devem ser apresentadas. Minha duvida basicamente é sobre isso, teria como numa div que ficara o menu eu colocar o recurso para que o link seja aberto na div que apresentará o conteúdo?

    1. Muito obrigado, Thiago! Espero que seja útil.

      Sobre a pergunta: Sim, teria como usar uma div para exibir o conteúdo sem recarregar a página, nesse esquema do Bootstrap.
      Mas, para isso você vai ter que usar AJAX para carregar/mudar o conteúdo nessa div (e ela deve ter um ID). Ficaria parecido com o que acontece no GMail.

      Existem frameworks que já fazem isso, como AngularJS. Eles implementam uma técnica chamada SPA (Single Page Application), onde todas as telas mudam sem recarregar toda a página, e muito mais rápido.

      Dá uma pesquisada em AJAX.
      Abs!

  14. Demo que eh bom nada 🙁

  15. Arrebentou! A melhor explicação sobre Bootstrap que já vi na net.

  16. Show Ruan!
    Gostei muito das explicações!
    Era o que estava procurando para entender a estrutura de Grids do Bootstrap 3!

    Uma abração!

  17. Q bacana!!!….tutorial super 10, sem muita enrolacao

  18. Muito bom! Ruan.
    Espero que você continue escrevendo posts simples e objetivos como este.
    Estava ha algum tempinho tentando entender na prática o sistema de grids do bootstrap e esse post me ajudou muito!
    Vlw 🙂

  19. Muito boa sua atitude, me ajudou bastante em meu projeto TCC.

  20. Me ajudou bastante aqui ! Obrigado

  21. Parabéns pelo tutorial, me ajudou muito!

  22. Olá!

    Gostaria de saber como faço, caso eu não queira que o header e o footer não fiquem separado do “corpo” do layout.

    Grato pela Atenção!

    1. Basta você colocá-los no mesmo container do “corpo”.

      Mas, na maioria dos casos, não recomendo fazer isso.
      A não ser que seja um layout muito específico.

      1. Obrigado pelo retorno..
        E aproximar o header de corpo, no seu exemplo de três colunas, eu consigo fazer, é que estou começando a desenvolver web, por isso desses questionamentos, não tenho muito conhecimento nessa área.

  23. Muito boa séria. Só com esses tutoriais conseguir entender como esse framework funciona. Agora é partir pra prática. Parabéns e continue compartilhando! =)

  24. Cara, meus sinceros parabéns.
    Faz tempo que quero sair do copia e cola do bootstrap, não há aulas boas assim que explicam cada detalhe.
    Muito obrigado.

    1. Muito obrigado, Wilton!

      1. Ruan ótimas dicas
        mas me responda uma coisa quando utilizo o sistema de grids e preciso de uma margem entre uma col e outra como faço para controlar essas margens?

        Aguardo

  25. Cara sinceramente, há tempos que venho procurando isso, melhor conteúdo que já vi sobre bootstrap.

    BELO TRABALHO!!!

  26. Ótimo tutorial! Tenho uma dúvida 🙂
    Estou fazendo um e-mail mkt responsive, e no rodapé gostaria de colocar as redes sociais em 4 imagens separadas (para o link não sumir no responsive), coloquei o corpo do e-mail mkt na dimensão máxima que é 940, porém, quando vou inserir as 4 imagens, não consigo deixa-las alinhadas (acabam estourando a imagem)
    Coloquei certinho:

    … (tentei dividir de diversas formas, 2×6, 2,8,2…)

    Tem ideia o que está saindo errado?

    muito obrigada!!

    1. Se você tiver usando o grid padrão de 12 colunas, você vai ter: 12/4 = 3.

      Então poderia usar a classe “.col-xs-3” nas colunas das imagens.

      E, também, colocar a classe “img-responsive” em cada img.

  27. So queria dar parabéns pelo excelente material apresentado,vai direto ao ponto sem enrolação,tirou muitas duvidas , Obrigado!!

  28. Cara, muito obrigado por essa aula! Muito preciosa!

  29. Eu inseri uma imagem no header e gostaria que essa imagem preenchesse toda a área do header, mas mesmo ajustando a largura e a altura, dá sempre um padding (margem interna) superior e inferior. Tem como retirar esse padding?

    1. Conseguiu resolver esse problema da altura ?

  30. Valeu pela aula.

  31. Olá, boa tarde!
    No caso se eu colocar imagens dentro do grid ocupando 4 por 4 por 4. Essas imagens não deveriam ter o mesmo tamanho?

  32. Foi muito útil o seu tutorial . Obrigado , Ruan

  33. Parabéns! Muito bom o post!

  34. Parabens pela explicação, nunca tinha visto nada sobre bootstrap e estou com uma clara visão do assunto agora. Parabens

    1. Obrigado, Frederico!

  35. Ola Ruan Carvalho….

    Gostaria de pedir que desse continuidade ao tutorial que ficou espetacular, muito bem explicado e de facil entendimento você nasceu para ensinar, então pesso carecidamente que me avise quando for publicar mais sobre o assunto…

Os comentários estão fechados.