Grid

Opções de Grid

Veja como os aspectos do sistema de Bootstrap grid trabalha em múltiplos tipos de aparelhos.

Aparelhos Super Pequenos Telefones (<768px) Aparelhos Pequenos Tablets (≥768px) Aparelhos Médios Desktops (≥992px) Aparelhos Grandes Desktops (≥1200px)
Funcionamento do Grid Sempre Horizontal Horizontal acima do ponto de quebra
Largura Máxima Nenhum (auto) 750px 970px 1170px
Prefixo de Classe .col-xs- .col-sm- .col-md- .col-lg-
# de colunas 12
Largura máxima da coluna Auto 60px 78px 95px
Gutter 30px (15px em cada lado da coluna)
Nestable Sim
Offsets Sim
Ordenação de Colunas Sim

As Classes de Grid se aplicam a aparelhos com uma largura de tela maior ou igual ao ponto de quebra e substituem em aparelhos pequenos. Desse modo, aplicando qualquer .col-md- para um elemento não irá apenas afetar seu estilo em aparelhos médios como tambem em grandes aparelhos caso .col-lg- não esteja presente.

Exemplo: Fixado para horizontal

Usando um .col-md-* grid, você pode criar um grid que começa fixado em um telefone e tablet antes de ficar na horizontal em desktops. Coloque colunas de grid em qualquer .row.

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

Exemplo: Telefone e Desktop

Quer suas colunas fixadas em celulares? Use as grids extra small and medium device grid adicionando .col-xs-* .col-md-* às suas colunas. Veja os exemplos abaixo para ter uma melhor ideia de como isso funciona.

.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

Exemplo: Celular, tablet, desktops

Feito a partir do exemplo anterior criando layouts ainda mais dinamicos para tablets .col-sm-* classes.

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

Resetando colunas responsivas

Para ajustes em certos pontos de quebra, use uma combinação de .clearfix e nosso utilitário de classes responsivas.

.col-xs-6 .col-sm-3
Redimensione sua janela ou veja no celular para um exemplo.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Movendo colunas

Mova colunas para a direita usando .col-md-offset-* classes. Essas classes aumentam a margem esquerda de uma coluna por * colunas. Por exemplo, .col-md-offset-4 move .col-md-4 sobre 4 colunas.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Nesting

Adicione um .row e uma série de .col-md-* colunas com uma .col-md-* coluna existente. As linhas devem incluir uma série de colunas, limitado a 12.

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6

Reordenando Colunas

Troque facilmente a ordem das suas colunas com .col-md-push-* e .col-md-pull-* classes de modificação.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9