Colunas

O sistema de grid possui 12 colunas independente do dispositivo seja ele grande ou pequeno. Toda coluna possui o mesmo tamanho e para iniciar a manipulação das colunas basta adicionar uma div com a classe row) e em seguida adicionar novas div com uma ou mais classe das colunas com a numeração entre 1 à 12, por exemplo col-6. Vale lembrar que a soma de colunas de uma classe dentro de uma row não pode ser superior a 12.

  <div class="row">
    <div class="col-1">1</div>
    <div class="col-1">2</div>
    <div class="col-1">3</div>
    <div class="col-1">4</div>
    <div class="col-1">5</div>
    <div class="col-1">6</div>
    <div class="col-1">7</div>
    <div class="col-1">8</div>
    <div class="col-1">9</div>
    <div class="col-1">10</div>
    <div class="col-1">11</div>
    <div class="col-1">12</div>
  </div>
            

Responsividade

Para tornar seu website responsivo, é necessário combinar as classes, ou seja, usar mais de uma classe. Veja um exemplo abaixo (se tiver pelo navegador, reduza a largura):

  <div class="row">
    <div class="col-12 sm-6 md-3">col-12 sm-6 md-3</div>
    <div class="col-12 sm-6 md-3">col-12 sm-6 md-3</div>
    <div class="col-12 sm-6 md-3">col-12 sm-6 md-3</div>
    <div class="col-12 sm-6 md-3">col-12 sm-6 md-3</div>
  </div>
            

Classes de deslocamento de colunas

As classes com o prefixo push-*, são usadas para deslocar colunas para a direita. Cada classe para criar colunas possui um push correspondente, por exemplo: a classe col-* possui a classe push-* como correspondente, classe sm-* possui a push-sm-* e assim por diante. Além disso, todas as classes de deslocamento push-* vão de 0 a 11. A tabela abaixo apresenta as classes de colunas e as classe de deslocamento correspondente.

Deslocamento de coluna

Abaixo é demonstrado um exemplo de deslocamento da coluna de classe lg-2 que desloca 8 colunas (push-lg-8). Note que a coluna irá para o final da linha. Isso se dá devido que anterior a ela existe uma coluna de tamanho 2 que se somando com o deslocamento é igual a 10 por isso a coluna de tamanho dois (somado é igual a 12) vai para o final. Se você diminuir a tela, o deslocamento deixará de existir, pois, o mesmo só se aplica ao dispositivo de largura ≥992px.

  <div class="row">
    <div class="col-2 md-2 lg-2">col-2 md-2 lg-2</div>
    <div class="col-2 md-2 lg-2 push-lg-8">col-2 md-2 lg-2 push-lg-8</div>
  </div>
            

Desabilitando deslocamento para classes

Em alguns casos, o deslocamento pode ser aplicado a mais de uma classe de coluna e de certa forma pode afetar o que você deseja fazer, para isso, todas as classes de deslocamento possui um valor que desabilita o deslocamento. Como citado anteriormente, os valores das classes de deslocamento vão de 0 à 11, as classes que termina com 0 desabilita o deslocamento. Veja abaixo um exemplo onde o deslocamento push-md-6 afeta as classes md-* e lg-*.

Para solucionar este problema basta adicionar a classe push-lg-0 desabilitando assim o deslocamento para as classes lg-*

  <div class="row">
    <div class="col-3 md-3 lg-3">col-3 md-3 lg-3</div>
    <div class="col-3 md-3 lg-3 push-md-6 push-lg-0">col-3 md-3 lg-3 push-md-6 push-lg-0</div>
  </div>
            

Coluna dentro de coluna

As vezes você quer adicionar uma coluna de tamanho x, e dentro dessa coluna você quer adicionar outras colunas uma abaixo da outra, até aí, sem problemas. Porém, você deseja adicionar uma coluna do lado da outra ou varios colunas lado a lado. Para que você consiga fazer isso, é preciso adicionar uma nova linha (classe row). Veja um exemplo abaixo:

  <div class="row">
    <div class="col-12 md-12">
      <p>Coluna de tamanho 12 (coluna mãe)</p>
      <div class="row">
        <div class="col-6 md-6">Coluna dentro de outra coluna (filha)</div>
        <div class="col-6 md-6">Coluna dentro de outra coluna (filha)</div>
      </div>
    </div>
  </div>