Exemplos de uso do grid Bootstrap

Layouts grid básicos para você se familiarizar com desenvolvimento, dentro do sistema de grid Bootstrap.

Grid em cinco níveis

Existem cinco brakpoints no sistema de grid Bootstrap, sendo um para cada extensão de dispositivos. Cada breakpoint começa em um tamanho de viewport mínimo e, automaticamente, extende-se aos dispositivos maiores, a não ser que seja sobrescrito.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Três colunas iguais

Faça três colunas de larguras idênticas, começando em dispositivos médios e aumentando para desktops maiores. Em dispositivos abaixo, as colunas vão se empilhar autimaticamente.

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

Três colunas diferentes

Faça três colunas, começando em dispositivos médios e aumentando para desktops maiores, mas com larguras variadas. Além disso, lembre-se que a soma máxima das colunas deve ser doze, em um bloco horizontal. Acima disso, as colunas começarão a se empilhar, não importando a viewport.

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

Duas colunas

Faça duas colunas, começando em dispositivos médios e escalando para telas maiores.

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

Única coluna com largura máxima

Nenhuma classe do grid é necessária, para elementos de largura máxima.


Duas colunas com duas colunas aninhadas

Como diz a documentação, aninhamento é fácil, bastando colocar uma linha de colunas dentro de uma coluna. Isso lhe dá duas colunas, começando em dispositivos médios e escalando para telas maiores, com outras duas (larguras iguais) dentro da coluna maior.

Em telas de tablets e abaixo, essas colunas suas colunas aninhadas vão se empilhar.

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

Mistura: móveis e desktops

O sistema de grid da versão 4 do Bootstrap possui quatro breakpoints: xs (extra small), sm (small), md (medium), lg (large) e xl (extra large). Você pode usar quase qualquer combinação dessas classes, para criar layouts mais dinâmicos e flexíveis.

Cada breakpoint se exetende para cima, significando que se você planeja definir as mesmas larguras para xs e sm, só precisa especificar o xs.

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

Mistura: móveis, tablets e desktops

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