Exemplos de grade de bootstrap
Layouts de grade básicos para você se familiarizar com a construção dentro do sistema de grade Bootstrap.
Nesses exemplos, a .themed-grid-col
classe é adicionada às colunas para adicionar alguns temas. Esta não é uma classe que está disponível no Bootstrap por padrão.
Cinco níveis de grade
Existem cinco camadas no sistema de grade do Bootstrap, uma para cada faixa de dispositivos que suportamos. Cada camada começa em um tamanho mínimo de janela de visualização e se aplica automaticamente aos dispositivos maiores, a menos que seja substituído.
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.
Alternativa de três colunas iguais
Usando as .row-cols-*
classes, você pode criar facilmente uma grade com colunas iguais.
.col
filho de
.row-cols-md-3
.col
filho de
.row-cols-md-3
.col
filho de
.row-cols-md-3
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.
Duas colunas
Obtenha duas colunas começando em desktops e escalando para desktops grandes .
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.
Misto: mobile e desktop
O sistema de grade do Bootstrap v4 tem cinco camadas de classes: xs (extra pequeno, esse infixo de classe não é usado), sm (pequeno), md (médio), lg (grande) e xl (extra grande). 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 md, lg e xl, você só precisa especificar md.
Misto: celular, tablet e desktop
Calhas
Com .gx-*
classes, as calhas horizontais podem ser ajustadas.
.col
com
.gx-4
calhas
.col
com
.gx-4
calhas
.col
com
.gx-4
calhas
.col
com
.gx-4
calhas
.col
com
.gx-4
calhas
.col
com
.gx-4
calhas
Use as .gy-*
classes para controlar as calhas verticais.
.col
com
.gy-4
calhas
.col
com
.gy-4
calhas
.col
com
.gy-4
calhas
.col
com
.gy-4
calhas
.col
com
.gy-4
calhas
.col
com
.gy-4
calhas
Com .g-*
classes, as calhas em ambas as direções podem ser ajustadas.
.col
com
.g-3
calhas
.col
com
.g-3
calhas
.col
com
.g-3
calhas
.col
com
.g-3
calhas
.col
com
.g-3
calhas
.col
com
.g-3
calhas
Recipientes
Classes adicionais adicionadas no Bootstrap v4.4 permitem contêineres com 100% de largura até um ponto de interrupção específico. v5 adiciona um novo ponto de xxl
interrupção.