Entendendo o sistema de grid do Bootstrap

Este post da continuidade a série de posts de introdução ao Bootstrap para iniciantes em desenvolvimento web e é o segundo post da série. Neste post vamos dar uma olhada no esquema de Grid utilizado pelo Bootstrap para criar o tal do design responsivo.


Se você ainda não sabe o que é o Bootstrap ou está interessado em utilizar o Framework, recomendo dar uma olhada no primeiro post da série.

No último tutorial finalizamos configurando nosso workspace de teste do Bootstrap. Criamos dois botões na tela para testar se realmente o framework estava operando e o resultado foi positivo. Agora vamos entender como opera a grid system, ou sistema de grid, ou apenas grid, do Bootstrap.

O que é uma Grid?

Qualquer um que já tentou montar um website sem framework deve saber a dor que é entender e utilizar as propriedades position. Elas simplesmente parecem não operar. Pensando em resolver essa dificuldade e muitas outras dentre o processo de desenvolvimento, foi criada uma solução chamada grid.

Grid nada mais é do que uma porção classes CSS, com técnicas e muitos hacks entre as propriedades de estilo, que possibilitam a desenvolvedores criar um layout responsivo, com base no tamanho de tela do dispositivo utilizado. Um website com design responsivo é capaz de se adaptar em qualquer resolução de tela sem a necessidade de criar outro projeto paralelo para tal.

Não confundam a responsividade de um website ou app com a capacidade deste de ser multiplataforma. O Bootstrap opera no ambiente web, as plataformas (Android, iOS, WP) estão em outra camada. Independente da plataforma, o website responsivo precisa se adaptar corretamente quando aberto a partir de um navegador web, seja o Chrome no Android, Safari no iOS e IE no WP.

Abaixo estão os principais problemas que existiam antes do surgimento dessa solução:

  • havia muita dificuldade em encontrar uma harmonia entre o designer que criava o layout no photoshop e o programador que tentava transformar aquilo em HTML.
  • não havia uma maneira aprimorada de criar uma página responsiva para web, a não ser que fosse criada uma página para cada dispositivo, o que ocorria bastante nos anos 2000, sites com versão desktop, e mobile a parte.
  • Cada desenvolvedor utilizava a solução que lhe agravada. Qualquer um que já tratou códigos de outra pessoa sabe o fim dessa história.
  • Não existia um padrão para tal, a responsividade na web, não existia (apesar de ser um conceito antigo em design, repare nos discos LP, CD’s, e fitas K7).


Hoje, utilizando grids criou-se uma harmonia no desenvolvimento web, que facilita a vida tanto do designer quanto do desenvolvedor web.

Lembra daquele caderno de quadriculado da época da escola?

Entendendo o sistema de grid do Bootstrap by Web Social Dev

Esse quadriculado, em cada página do caderno, é uma grid, composta por linhas e colunas. A Grid do Bootstrap funciona da mesma forma, com linhas e colunas, ou melhor, com columns e rows.

Na imagem abaixo da pra entender o papel da grid em uma página web. Note que os elementos são compostos dentro dos limites de algumas colunas, o que é padrão para uma página que utiliza um sistema de grid.

Entendendo o sistema de grid do Bootstrap by Web Social Dev

Essa outra imagem mostra como o design do layout é feito em cima dessas colunas. Olha ai a harmonia entre o designer e o desenvolvedor. Repare que os elementos tem um ponto fixo da coluna para se apresentar, isso facilita muito na hora de programar o HTML/CSS.

Entendendo o sistema de grid do Bootstrap by Web Social Dev

Normalmente são utilizadas 12 colunas em uma grid. O próprio Bootstrap utiliza 12 colunas por padrão, mas esse valor não é fixo e obrigatório (no exemplo acima são utilizadas 16 colunas), ele depende muito da necessidade e da metodologia aplicada na produção do projeto.

Um smartphone com tela de 4″ por exemplo não possui espaço físico para apresentar as 12 colunas impostas por padrão, daí a responsividade do Bootstrap entra em ação, transformando 12 colunas em apenas 4.

Entendendo o sistema de grid do Bootstrap by Web Social Dev

Essa tela é conhecida por quem utiliza o Dreamweaver acima da versão CS5, e é um recurso bem legal, apesar de não ser assim tão essencial (fazer na mão às vezes tem mais *graça*). Nele você define antes de começar o projeto, quais as medidas para os três principais dispositivos com acesso a internet presentes no mercado, smartphones, tablets e desktops/notebooks.

Mas como são determinados os estilos para cada dispositivo? Isso é feito com um recurso chamado media queries.


O que são Media Queries

Media Query é um recurso presente no CSS3 que permite aplicar determinados estilos com base nos recursos media (cor, altura, largura, tipo) de uma página web. Isso permite que você crie apenas um arquivo CSS para determinar os estilos de qualquer medida em que o site possa ser exibido.

Em algum momento da evolução do CSS3 foram adicionadas especificações ao recurso que permite criar escopos mais específicos, como TVs, smartphones, desktops, impressoras (isso mesmo, um arquivo de estilo para a impressão de uma página), entre outros.

Media Queries basicamente são triggers, ou gatilhos, para criar ações em arquivos de estilo (CSS, Sass, Less, entre outros) para determinar que estilo vai ser aplicado em uma determinada situação.

Você deve estar pensando: tá. e como ele sabe que dispositivo é utilizado?

Bom, ai depende do código que você vai criar. Vamos pegar o código abaixo como exemplo:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

Media query, fulano then Fulano, media query then Prazer.

O código acima aplica estilos em qualquer tela com a medida de no máximo 300px. Nessa media query, os parâmetros mais importantes são o item screen, que determina qual o tipo de media que vamos pegar como parâmetro, e entre parenteses uma propriedade para gerar a ação da media query, que nosso.

Como já havia mencionado, existem diversas formas de definir qual a media de parâmetro para a ação que vai aplicar os estilos configurados. Gostaria de discorrer mais sobre media queries, mas o conteúdo pode ficar um pouco denso, então vamos partir direto para as medias queries que o Bootstrap utiliza já que nosso foco são páginas para web.

Para maiores informações sobre media queries, acesse este manual da Mozilla.

As media queries utilizadas pelo Bootstrap são:

/* dispositivos bem pequenos (telefones e outros dispositivos com menos de 768px) */
/* Não é necessário media query nesta parte, já que esse é o padrão */

/* dispositivos com 768px ou mais de largura */
@media (min-width: @screen-sm-min) { ... }

/* dispositivos com 992px ou mais de largura) */
@media (min-width: @screen-md-min) { ... }

/* dispositivos com 1200px ou mais de largura) */
@media (min-width: @screen-lg-min) { ... }

Você deve estar se perguntando porque essas media queries são declaradas com valores diferentes do exemplo anterior, que foram declarados com medidas. Bom, para ser breve, as configurações de estilos do Bootstrap são feitas com o pré processador Less (e também o Sass, mas o Less tem mais história no Bootstrap), que utiliza técnicas para replicar dados e otimizar a interação com os estilos.

Um tempo atrás traduzi um artigo sobre o Less para o Tuts+, quando ele estava quase na versão 2.0. Quem quiser entender mais sobre esse pré processador, nesse artigo tem bastante informação útil para iniciantes.


Depois da mágica do Less, é gerado um arquivo .css com as media queries abaixo (e claro, os estilos declarados, o que não vale a pena mostrar aqui porque são milhares de linhas de código, mas experimente ver o arquivo bootstrap.css qualquer dia).

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {
  /* aqui são declarados os estilos */
}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}

Antes de testarmos a grid em uma página, é bom ter noção de algumas informações sobre esse recurso.

Informações importantes sobre a Grid do Bootstrap

Algumas premissas que devem ser respeitadas ao utilizar a grid (essas informações estão na documentação oficial do Bootstrap, na parte de introdução ao Grid System):

  • toda linha, ou row, tem que estar dentro de um container (classe geralmente aplicada a uma DIV para determinar que ali vão conter linhas que vão agrupar o layout) ou container-fluid. A diferença entre as duas classes é que a primeira é boxed, tem limite para a medida das laterais, e a segunda ocupa todo espaço da tela sem margens laterais.
  • toda coluna, ou columns, fica dentro de uma row/linha (que segue a mesma lógica dos containers, geralmente é utilizado uma DIV para empregar o papel de linha). As colunas agrupam conteúdo, então as columns devem ser os únicos elementos filho dentro de uma row. Você pode ter problema de posicionamento de elementos se essa ordem não forrespeitada.
  • Para criar o container, as colunas e as linhas, existem classes CSS pré definidas;geralmente utilizadas no elemento DIV, como as classes .container ou .container-fluid, .row e .columns.
  • Existem espaçamentos entre as colunas, e entre o conteúdo dentro de uma coluna.
  • Para determinar qual o espaço ocupado por uma coluna, dentro do limite de 12 colunas, utilizamos uma classe como essa .col-xs-12, que determina que aquela coluna vai ocupar o espaço de 12 colunas só pra ela, em dispositivos de tela pequena (smartphones).
  • Existem classes espaciais para determinar qual o espaço que determinada coluna vai ter em diferentes tamanhos de tela. Repare que a classe que indica o espaço ocupado é composta por três itens: col, xs e um número de 0 a 12, dependendo do seu limite de colunas. O parâmetro xs indica que essa coluna vai ocupar 12 colunas em telas pequenas.
  • Além da medida xs utilizada para telas com até 768px de largura, também temos as medidas sm, para telas com até 991px de largura, md para telas até 1199px, e a lg para telas com no mínimo 1200px de largura.
  • Qualquer medida acima de 1200px assume ainda a configuração da medida lg.


Bom, agora acho que já podemos partir para um exemplo prático de utilização da grid, e partir dele eu entro nos demais detalhes de utilização do recurso. Vamos utilizar os arquivos do exemplo anterior.

Partindo para os exemplos práticos

Vamos começar criando um novo arquivo HTML na pasta Bootstrap, chamado grid.html. Para facilitar, copie e cole todas as informações presentes no arquivo index.html, utilizado no exemplo anterior, nele o layout do arquivo HTML está pronto para utilizar o Bootstrap.

No arquivo grid.html, apague o conteúdo na área de produção e vamos começar criando uma coluna na página. Insira o código abaixo na área de produção, salve o arquivo e teste no navegador.

<div class="container">
  <div class="row">
    <div class="col-lg-1">col-lg-1</div>
  </div>
</div>

No navegador você vai ver apenas o texto “col-lg-1”. Isso ocorre porque por padrão as colunas não possuem estilos de design declarados (como fundo de cor, cor de letra, etc). Vamos aplicar alguns estilos então para esse classe para que possamos entender melhor o que estamos fazendo, copie o bloco de código abaixo e cole antes do fechamento da tag head.

<style>
  .col-lg-1 {
    background-color: gold;
    border: solid 1px #424242;
  }
  .container {
    margin-top: 40px;
  }
</style>

Nesse bloco de código definimos o fundo dourado e borda escura de 1px para os elementos que utilizarem a class .col-lg-1, e para o .container uma margem de 40px do limite do topo, para a grid não ficar grudada no topo. O resultado deve ser similar a imagem abaixo.

Entendendo o sistema de grid do Bootstrap by Web Social Dev

Experimente agora terminar de declarar as 11 colunas restantes naquela linha, para fixar bem esse teste. Depois, tente criar uma grid como no exemplo da imagem abaixo.

Entendendo o sistema de grid do Bootstrap by Web Social Dev

Dica: abaixo uma cola do CSS que utilizei, já que o foco do tutorial não é ensinar CSS.

   <style>
      .col-lg-1 {
        background-color: gold;
        border: solid 1px #424242;
     }
     
     .col-lg-2 {
       background-color: cornflowerblue;
       border: solid 1px #424242;
     }
     
     .col-lg-4 {
       background-color: crimson;
       color: snow;
       border: solid 1px #424242;
     }
     
     .col-lg-6 {
       background-color: dimgray;
       color: snow;
       border: solid 1px #424242;
     }
     
     .col-lg-12 {
       background-color: blueviolet;
       color: snow;
       border: solid 1px #424242;
     }
     
      .container {
        margin-top: 40px;
      }
   </style>

O arquivo completo com o demo eu disponibilizo no próximo tutorial, vamos ver se vocês conseguem fazer sozinhos primeiro :).


Qualquer dúvida estou nos comentários! Ainda vou abordar mais essa parte da grid no próximo artigo da série, e prometo que com mais exemplos práticos do que explicação, afinal tem muita coisa ainda pra explicar sobre.

É isso galera, qualquer coisa pode gritar nos comentários!

  • Marcio Orlando

    muito bom! espero que a série continue!

  • Bruno Tinelli

    Excelente artigo, assim como o primeiro! Parabéns, esperando o próximo! Da uma olhada no texto na parte “Vamos aplicar alguns estilos então para esse classe para…..”.

    • Opa Bruno obrigado, já arrumei o texto, é que escrevo fazendo outras mil coisas ao mesmo tempo, não liga não hahahaha

      • Bruno Tinelli

        Sei bem como é, por isso deixei no comentário.

  • Bruno Tinelli

    Thierry, tem como eu definir a coluna que um elemento vai ocupar? Quero colocar um elemento da coluna 4 a coluna 8, mas não quero ter nenhum elemento nas colunas de 1 a 3. Preciso criar as colunas e deixar em branco, ou tem como eu “centralizar” uma coluna.

    • Sim Bruno, tem sim, você precisa usar os colunas offset. Até sexta já postei a segunda parte de introdução a grid, ai vai abordar essa parte 🙂

      • Bruno Tinelli

        Obrigado, fico no aguardo do próximo post.

        • to meio sem tempo, mas não passa dessa semana! rs

  • Marcel Bonfim

    Muito bem explicado. Valeu!

  • Jonatan Damasio Potrikus

    Salve, mano virei seu fã haha em pouco tempo entrou de uma vez por toda. a real utilização do Bootstrap. Parabéns mesmo! Muito obrigado.

    • Valeu jonatan! Já era pra eu er terminado essa revisão mas a faculdade ta me consumindo rsrs

  • Pedro Pimentel

    Queria colocar um botão centralizado na tela, apenas um botão bem ao centro. Como fazer?

  • Pedro Pimentel

    Como inserir um elemento no topo de uma coluna e outro em seu final? Uma vez que os inserira vem sempre um logo abaixo do outro.

    • Pedro, nesse caso é interessante declarar a grid, e dentro dela utilizar flexbox enquadrar o contéudo. Dá uma olhada em flexbox que você vai conseguir fazer o que pretente.

    • Tenta dar uma olhada no conceito de flexbox.

  • quinhone

    Parabéns pelo artigo!
    Me diga uma coisa, é correto eu usar as colunas assim:

    ou isso não é uma boa prática?

    • Não tem nada de errado nisso, se você não se perder nas declarações rs

  • Lex

    Simples e prático, ajudou bastante! Valeu cara!

  • Paulo Furlan

    Muito bom o artigo… parabéns!
    Vai ter a parte dois desse tutorial? rs..

    Obrigado!

  • Karen

    Olá, gostei muito do artigo. Sou iniciante e me ajudou bastante. Qual é a continuação do mesmo? Não consegui encontrar por aqui uma sequência específica para o assunto. Obrigada.Grande abraço.