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-colclasse é 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.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

Alternativa de três colunas iguais

Usando as .row-cols-*classes, você pode criar facilmente uma grade com colunas iguais.

.colfilho 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.

.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-4

Misto: mobile e desktop

O sistema de grade do Bootstrap v5 tem seis camadas de classes: xs (extra pequeno, esse infixo de classe não é usado), sm (pequeno), md (médio), lg (grande), xl (x-grande) e xxl (xx -ampla). 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, xl e xxl, você só precisa especificar md.

.col-md-8

.col-6 .col-md-4

.col-6

Misto: celular, tablet e desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Calhas

Com .gx-*classes, as calhas horizontais podem ser ajustadas.

.colcom .gx-4calhas

Use as .gy-*classes para controlar as calhas verticais.

.colcom .gy-4calhas

Com .g-*classes, as calhas em ambas as direções podem ser ajustadas.

.colcom .g-3calhas

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 xxlinterrupção.

.recipiente

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid