Sistema de Grade Bootstrap 5

Sistema de grade

O sistema de grade do Bootstrap é construído com flexbox, permitindo no máximo 12 colunas na página.

Se você não quiser usar todas as 12 colunas separadamente, você pode combiná-las para criar colunas mais largas:

O sistema de grade é rapidamente responsivo, as colunas se rearranjam automaticamente com base no tamanho da tela.

Certifique-se de que a soma seja igual ou menor que 12 (não é necessário usar todos os 12 colunas disponíveis).

Classes de grade

O sistema de grade do Bootstrap 5 oferece seis classes:

  • .col- (Dispositivos ultra-pequenos - largura da tela menor que 576px)
  • .col-sm- (Dispositivos pequenos - largura da tela igual ou maior que 576px)
  • .col-md- (Dispositivos medianos - largura da tela igual ou maior que 768px)
  • .col-lg- (Dispositivos grandes - largura da tela igual ou maior que 992px)
  • .col-xl- (Dispositivos ultra-grandes - largura da tela igual ou maior que 1200px)
  • .col-xxl- (Dispositivos extra-grandes - largura da tela igual ou maior que 1400px)

Combinando essas classes, você pode criar layouts mais dinâmicos e flexíveis.

Dica:Cada classe é ampliada proporcionalmente, então se você quiser definir a mesma largura para sm e md, você só precisa definir sm.

Estrutura básica da grade do Bootstrap 5

Aqui está a estrutura básica da grade do Bootstrap 5:

/* Controlar a largura das colunas e como elas são exibidas em diferentes dispositivos */
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
/* ou deixar o Bootstrap lidar automaticamente com o layout */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Experimente você mesmo

Primeiro exemplo: criar uma linha (<div class = "row">). Então, adicione o número necessário de colunas (com .col-*-* etiqueta da classe). O primeiro asterisco (*) representa a responsividade: sm, md, lg, xl ou xxl, enquanto o segundo asterisco representa um número, somando 12 em cada linha.

Segundo exemplo: não atribuir a cada col Adicionar um número, em vez de deixar o bootstrap lidar com o layout, para criar colunas iguais de largura: duas "col" Elemento = largura de 50% de cada coluna, enquanto três colunas = largura de 33.33% de cada coluna. Quatro colunas = 25% de largura, etc. Você também pode usar .col-sm|md|lg|xl|xxl Torna as colunas responsivas.

Opções de grade

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

Extra pequeno (<576px) Pequeno (>=576px) Médio (>=768px) Grande (>=992px) Super grande (>=1200px) Extra grande (>=1400px)
Prefixo da classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Comportamento da grade Sempre horizontal Começar a dobrar, horizontalmente acima do ponto de quebra Começar a dobrar, horizontalmente acima do ponto de quebra Começar a dobrar, horizontalmente acima do ponto de quebra Começar a dobrar, horizontalmente acima do ponto de quebra Começar a dobrar, horizontalmente acima do ponto de quebra
Largura do contêiner Nenhum (auto) 540px 720px 960px 1140px 1320px
Apto para Tela vertical do telefone Tela horizontal do telefone Tablet Notebook Notebook e computador de mesa Notebook e computador de mesa
Número da coluna # 12 12 12 12 12 12
Largura do espaço entre colunas 1.5rem (cada lado da coluna .75rem) 1.5rem (cada lado da coluna .75rem) 1.5rem (cada lado da coluna .75rem) 1.5rem (cada lado da coluna .75rem) 1.5rem (cada lado da coluna .75rem) 1.5rem (cada lado da coluna .75rem)
Empacotável Sim Sim Sim Sim Sim Sim
Deslocamento Sim Sim Sim Sim Sim Sim
Classificação de colunas Sim Sim Sim Sim Sim Sim