Bootstrap 4 Grid System

Bootstrap 4 Grid System

O sistema de grade do Bootstrap permite até 12 colunas na página.

Se você não quiser usar todas as 12 colunas individualmente, poderá agrupar as colunas para criar colunas mais amplas:

O sistema de grade do Bootstrap é responsivo e as colunas serão reorganizadas dependendo do tamanho da tela: em uma tela grande, pode parecer melhor com o conteúdo organizado em três colunas, mas em uma tela pequena seria melhor se os itens de conteúdo fossem empilhados em cima um do outro.

Classes de grade

O sistema de grade do Bootstrap 4 tem cinco classes:

• .col-(dispositivos extra pequenos - largura da tela menor que 576px)
• .col-sm-(pequenos dispositivos - largura da tela igual ou superior a 576px)
• .col-md-(dispositivos médios - largura da tela igual ou superior a 768px)
• .col-lg-(dispositivos grandes - largura da tela igual ou superior a 992px)
• .col-xl- (dispositivos extragrandes - largura da tela igual ou superior a 1200px)

As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.

Dica: Cada classe aumenta, então se você deseja definir as mesmas larguras para sme md, você só precisa especificar sm.

Regras do sistema de grade

Algumas regras do sistema de grade do Bootstrap 4:

• As linhas devem ser colocadas dentro de uma .container(largura fixa) ou .container-fluid(largura total) para alinhamento e preenchimento adequados
• Use linhas para criar grupos horizontais de colunas
• O conteúdo deve ser colocado dentro de colunas e somente as colunas podem ser filhas imediatas de linhas
• Classes predefinidas como .row e .col-sm-4estão disponíveis para criar layouts de grade rapidamente
• As colunas criam calhas (lacunas entre o conteúdo da coluna) por meio de preenchimento. Esse preenchimento é deslocado em linhas para a primeira e última coluna por meio de margem negativa em.rows
• As colunas de grade são criadas especificando o número de 12 colunas disponíveis que você deseja abranger. Por exemplo, três colunas iguais usariam três.col-sm-4
• As larguras das colunas estão em porcentagem, portanto, são sempre fluidas e dimensionadas em relação ao elemento pai
• A maior diferença entre o Bootstrap 3 e o Bootstrap 4 é que o Bootstrap 4 agora usa flexbox, em vez de floats. Uma grande vantagem do flexbox é que as colunas de grade sem uma largura especificada serão automaticamente dispostas como "colunas de largura igual" (e altura igual). Exemplo: Três elementos com .col-smterão, cada um, automaticamente 33,33% de largura a partir do ponto de interrupção pequeno e para cima. Dica: Se você quiser saber mais sobre o Flexbox, você pode ler nosso Tutorial do CSS Flexbox .

Estrutura Básica de uma Grade Bootstrap 4

A seguir está uma estrutura básica de uma grade do Bootstrap 4:

Primeiro exemplo: crie uma linha ( <div class="row">). Em seguida, adicione o número desejado de colunas (tags com .col-*-*classes apropriadas). A primeira estrela (*) representa a capacidade de resposta: sm, md, lg ou xl, enquanto a segunda estrela representa um número, que deve sempre somar 12 para cada linha.

Segundo exemplo: em vez de adicionar um número a cada col, deixe o bootstrap manipular o layout, para criar colunas de largura igual: dois "col"elementos = 50% de largura para cada coluna. três colunas = 33,33% de largura para cada coluna. quatro cols = 25% de largura, etc. Você também pode usar .col-sm|md|lg|xlpara tornar as colunas responsivas.

Opções de grade

A tabela a seguir resume como o sistema de grade do Bootstrap 4 funciona em diferentes tamanhos de tela:

Exemplos

Os próximos capítulos mostram exemplos de sistemas de grade para diferentes dispositivos e larguras de tela:

• Empilhado para horizontal
• Esquema Extra Pequeno
• Dispositivos pequenos
• Dispositivos médios
• Dispositivos grandes
• Dispositivos extra grandes
• Mais exemplos de grade