Grade Bootstrap 5

Sistema de Grade Bootstrap 5

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, pode combiná-las para criar colunas mais largas:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

O sistema de grade é rapidamente responsivo, as colunas se rearranjam automaticamente conforme o tamanho da tela.

Certifique-se de que a soma seja igual ou menor que 12 (se você não precisar usar todos os 12 colunas disponíveis).

Classes de grade

O sistema de grade do Bootstrap 5 tem seis classes:

  • .col- (dispositivos ultrapequenos - 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 768 pixels)
  • .col-lg- (dispositivos grandes - largura da tela igual ou maior que 992 pixels)
  • .col-xl- (dispositivos xlarge - largura da tela igual ou maior que 1200px)
  • .col-xxl- (dispositivos xxlarge - largura da tela igual ou maior que 1400px)

Você pode combinar essas classes para criar uma disposição mais dinâmica e flexível.

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

A 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 deixe o Bootstrap lidar automaticamente com o layout */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Primeiro exemplo: crie uma linha (<div class="row">). Em seguida, adicione a quantidade necessária de colunas (com os rótulos apropriados .col-*-* o rótulo da classe). O primeiro asterisco (*) representa a responsividade: sm, md, lg, xl ou xxl, e o segundo asterisco representa o número, somando 12 em cada linha.

Segundo exemplo: não é necessário dar a cada col Adicionar um número, deixando o bootstrap lidar com o layout para criar colunas iguais: dois "col" Elemento = cada coluna tem 50% de largura, enquanto três cols têm cada coluna 33.33% de largura. Quatro colunas = 25% de largura, etc. Você também pode usar .col-sm|md|lg|xl|xxl Fornecer responsividade às colunas.

A seguir, organizamos alguns exemplos básicos de layout de grade do Bootstrap 5.

Colunas divididas em três partes

O exemplo a seguir mostra como criar três colunas iguais em todos os dispositivos e larguras de tela:

Exemplo

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Experimente pessoalmente

Colunas responsivas

O exemplo a seguir mostra como criar quatro colunas iguais a partir de tablets e expandir para desktops ultra-grandes.Nos smartphones ou telas com largura inferior a 576px, as colunas se empilharam automaticamente:

Exemplo

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Experimente pessoalmente

Duas colunas responsivas diferentes

O exemplo a seguir mostra como obter duas colunas de diferentes larguras em tablets e expandir para desktops ultra-grandes:

Exemplo

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Experimente pessoalmente

Dica:Você aprenderá sobre isso no final deste tutorial Sistema de grade Mais conteúdo.