Você não consegue entender o sistema de grid do Bootstrap?
Termos como col-sm, col-md, col-offset soam confusos?

Bom, você não é o único.

Muita gente se atrapalha com a sintaxe do Bootstrap mas, acredite, depois que você compreende fica muito fácil desenvolver um layout tanto para desktop quanto para mobile.

A especificação diz:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

O que isso quer dizer?

Assim como vários outros frameworks front-end, o Bootstrap faz uso de um grid de 12 colunas.

As 12 colunas do grid do Bootstrap

Na figura temos 12 colunas cuja classe .col-**-1 determina que cada “col” tenha o tamanho igual a 1. Os asteriscos devem ser substituídos por xs, sm, md ou lg (extra small, small, medium e large respectivamente). Falo sobre “breakpoints” mais abaixo.

Desde Agosto de 2013, quando foi lançada a versão 3, o Bootstrap adotou a abordagem mobile first* e responsiva, o que significa que suas colunas vão se adequando à tela quanto maior for sua largura (progressive enhancement), ou seja, do mobile para o desktop; diferente das versões anteriores, quando as colunas se ajustavam quanto menor fosse a tela (graceful degradation), do desktop para o mobile.

Dizer que o conceito mobile first se resume a “tamanho de tela” é um equívoco grotesco. Existe – ou deveria existir – todo um planejamento com foco no conteúdo para ser acessado de redes mais limitadas cujo tráfego pode ou não ser tarifado, como nossa 3G.
Performance de carregamento deve ser a abordagem principal desse conceito, e não só tamanho de telas.

Porém, performance de carregamento foge do propósito deste artigo, onde abordarei somente… tamanho de tela.

Para que serve um grid?

Pense em grid como uma planilha do Excel, onde você tem 12 colunas e infinitas linhas para preencher com seu conteúdo.
Células da planilha do Excel podem ser mescladas. Colunas em uma linha do grid também, exceto que você não pode mesclar linhas.

O grid do Bootstrap funciona assim:

  • Colunas (.col) devem estar dentro de linhas (.row) que por sua vez devem estar dentro de um .container (largura fixa) ou .container-fluid (largura total). Vide exemplo logo abaixo.
  • Colunas podem ser aninhadas (colunas dentro de colunas).
  • Colunas possuem respiros (espaços preenchimento entre elas) usando padding.
  • Colunas são criadas obedecendo o critério de múltiplos de 12.
    Por exemplo, três colunas de largura equivalentes devem ter a classe .col-**-4 (4 + 4 + 4 = 12).
    Nota: Você não consegue criar um layout de, por exemplo, 5 colunas com esse método. Não 5 colunas de larguras equivalentes, claro.
  • Se mais de 12 colunas forem inseridas dentro de uma única linha, uma nova linha abaixo da atual comportará as demais colunas.
  • Faça uso dos breakpoints disponíveis (.col-xs-*, .col-sm-*, .col-md-* e .col-lg-*) pensando nos dispositivos (smartphones, tablets e desktops).

Exemplo:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <h2>Coluna esquerda</h2>
      <p>Conteúdo da coluna</p>
    </div>
    <div class="col-sm-9">
      <h2>Coluna direita</h2>
      <p>Conteúdo da coluna</p>
    </div>
  </div>
</div>
Exemplo de grid

Neste exemplo estou exibindo duas colunas que, juntas, ocupam a largura total da tela devido ao container ter a classe .container-fluid. Sendo que a coluna da esquerda ocupa 3/12 (25%) da área disponível e a da direita 9/12 (75%).

Para explicar a nomenclatura de classes mencionada acima vou transcrever as opções de grid do site do Bootstrap:

Dispositivos →
Breakpoints →
Smartphones
“Extra small” (<768px)
Tablets
“Small” (≥768px)
Notebooks
“Medium” (≥992px)
Desktops
“Large” (≥1200px)
Comportamento das colunasNormal, independe do breakpointIniciam empilhadas (como linhas), mas se dispõe lado a lado à partir dos breakpoints
Prefixo da classe.col-xs-.col-sm-.col-md-.col-lg-

Até aqui tudo bem?
Agora vou explicar visualmente como as colunas se comportam usando cada uma dessas classes. Acompanhe abaixo:

“Small devices”

Imagem explicando o comportamento das colunas no grid com a classe .col-sm abaixo e acima do breakpoint de 768 pixels

“A regra é clara”: abaixo de 768 pixels as colunas se comportam como linhas. Ou seja, se o dispositivo tiver uma tela pequena é assim que veremos nossas colunas: empilhadas. E, igual ou maior a 768 pixels (um iPad na orientação “retrato”, por exemplo) temos as colunas como devem ser, uma ao lado da outra.


“Medium devices”

Imagem explicando o comportamento das colunas no grid com a classe .col-ms abaixo e acima do breakpoint de 992 pixels

Aqui o breakpoint é de 992 pixels. Abaixo disso colunas são linhas e igual ou acima desse valor elas se comportam como deveriam. iPads na orientação paisagem, notebooks e desktops entram nessa “categoria”.


“Large devices”

Imagem explicando o comportamento das colunas no grid com a classe .col-lg abaixo e acima do breakpoint de 1200 pixels

Digamos que suas colunas comportam grande quantidade de texto e/ou elementos em nível de bloco grandes, de modo que o layout não pode “quebrar” em telas menores. Com essa classe, cujo breakpoint é de 1200 pixels, você não deixa que isso aconteça.


“Extra small devices”

Imagem explicando o comportamento das colunas no grid  com a classe .col-xs abaixo e acima do breakpoint de 768 pixels

Independente do breakpoint, colunas com essa classe serão sempre… colunas. Sendo assim, tanto no smartphone quanto no desktop as colunas aparecerão lado a lado.


A essa altura você pode chegar a uma conclusão: Se seu layout tiver apenas uma coluna, não importa se você atribui .col-xs-12, .col-sm-12, .col-md-12 ou .col-lg-12. Simplesmente porque uma coluna é uma coluna, não importa o tamanho da tela.

Combinando classes

Tomemos um exemplo com 4 colunas iguais (3 + 3 + 3 + 3 = 12).
Mas, digamos que essas 4 colunas fiquem muito espremidas em telas menores (um iPad em orientação retrato, por exemplo).
Eu posso combinar classes e dizer que o grid exiba apenas 2 colunas (6 + 6 = 12).

Exemplos: .col-md-6 .col-lg-3 ou .col-sm-6 .col-md-3.

Vou optar pelo segundo exemplo, cujos breakpoints são 768 e 992 pixels. O código ficaria assim:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-3">
      ...conteúdo da coluna 1...
    </div>
    <div class="col-sm-6 col-md-3">
      ...conteúdo da coluna 2...
    </div>
    <div class="col-sm-6 col-md-3">
      ...conteúdo da coluna 3...
    </div>
    <div class="col-sm-6 col-md-3">
      ...conteúdo da coluna 4...
    </div>
  </div>
</div>

Combinando classes do grid para vários dispositivos

Pronto! Tenho 2 colunas (com 50% de largura cada) em telas iguais ou acima de 768 pixels e também 4 colunas (com 25% de largura cada) em telas iguais ou acima de 992 pixels.

Perceba que o que ocorre é uma “quebra de layout” proposital quando atribuo a classe .col-sm-6 por 4 vezes, pois 6 + 6 + 6 + 6 = 24.
Por isso temos 2 linhas.

Deslocando colunas

Desloque colunas para a direita usando a classe .col-**-offset-*. Ela deve ser usada em conjunto com sua homônima sem o “offset”.
Por exemplo, .col-md-offset-4 move a .col-md-4 quatro casas para a direita.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      .col-md-4 .col-md-offset-4
    </div>
  </div>
</div>

Exemplo de deslocamento de colunas no grid

Aninhando colunas

Você pode adicionar novas linhas (.row) com suas colunas (.col-**-*) dentro de colunas.

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Coluna 1A
      
      <div class="row">
        <div class="col-sm-8 col-md-6">
          Coluna 2A
        </div>
        <div class="col-sm-4 col-md-6">
          Coluna 2B
        </div>
      </div>

    </div>
    <div class="col-sm-3">
      Coluna 1B
    </div>
  </div>
</div>

Exemplo de colunas aninhadas no grid

Ordenando colunas

Altere a ordem padrão das colunas com as classes .col-**-push-* e .col-**-pull-*.
Com push você desloca a coluna para a direita e, com pull, para a esquerda.

<div class="container">
  <div class="row">
    <div class="col-md-9 col-md-push-3">Coluna esquerda</div>
    <div class="col-md-3 col-md-pull-9">Coluna direita</div>
  </div>
  <div class="row">
    <div class="col-md-4 col-md-push-4">Coluna esquerda</div>
    <div class="col-md-4 col-md-push-4">Coluna do meio</div>
    <div class="col-md-4 col-md-pull-8">Coluna direita</div>
  </div>
</div>

O próprio tamanho da coluna diz a quantidade de casas a deslocar.
Se a coluna tem tamanho 9, será necessário deslocá-la 3 casas (12 – 9 = 3).

Exemplo de ordenação de colunas no grid

Na segunda .row dei um exemplo onde as colunas esquerda e do meio são deslocadas 4 casas para a direita (push), e a coluna da direita é deslocada 8 casas para a esquerda (pull).

Qual a utilidade disso?

“content matters”!
O que manda não é o visual, mas o conteúdo. Se você é um desenvolvedor que leva em conta a semântica, pode querer que determinado conteúdo de uma coluna venha antes de outro na ordem do documento HTML.


Se ainda tiver alguma dúvida ou sugestão a fazer, fique à vontade!