Três colunas iguais

Obtenha três colunas de largura igual começando em desktops e dimensionando para desktops grandes . Em dispositivos móveis, tablets e inferiores, as colunas serão empilhadas automaticamente.

.col-md-4
.col-md-4
.col-md-4

Três colunas desiguais

Obtenha três colunas começando em desktops e dimensionando para grandes desktops de várias larguras. Lembre-se, as colunas da grade devem somar até doze para um único bloco horizontal. Mais do que isso, as colunas começam a se empilhar independentemente da janela de visualização.

.col-md-3
.col-md-6
.col-md-3

Duas colunas

Obtenha duas colunas começando em desktops e escalando para desktops grandes .

.col-md-8
.col-md-4

Largura total, coluna única

Nenhuma classe de grade é necessária para elementos de largura total.


Duas colunas com duas colunas aninhadas

De acordo com a documentação, o aninhamento é fácil - basta colocar uma linha de colunas em uma coluna existente. Isso fornece duas colunas começando em desktops e dimensionando para desktops grandes , com outras duas (larguras iguais) dentro da coluna maior.

Em tamanhos de dispositivos móveis, tablets e inferiores, essas colunas e suas colunas aninhadas serão empilhadas.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Misto: mobile e desktop

O sistema de grade do Bootstrap 3 tem quatro camadas de classes: xs (telefones), sm (tablets), md (desktops) e lg (desktops maiores). Você pode usar praticamente qualquer combinação dessas classes para criar layouts mais dinâmicos e flexíveis.

Cada camada de classes aumenta, ou seja, se você planeja definir as mesmas larguras para xs e sm, você só precisa especificar xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Misto: celular, tablet e desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Limpeza de coluna

Limpe os flutuadores em pontos de interrupção específicos para evitar um envolvimento estranho com conteúdo desigual.

.col-xs-6 .col-sm-3
Redimensione sua janela de visualização ou verifique-a em seu telefone para ver um exemplo.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Redefinições de deslocamento, push e pull

Redefinir deslocamentos, pushes e pulls em pontos de interrupção específicos.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0