Grade da Bootstrap 5: Do Empilhamento para o Horizontal

Exemplo de Grade: Alinhamento Horizontal

Vamos criar um sistema de grade básico, que começa empilhado em dispositivos ultra-pequenos e se torna horizontal em dispositivos maiores.

O exemplo a seguir mostra uma configuração de dois colunas simples de "Alinhamento Horizontal", o que significa que ele gerará uma divisão de 50%/50% em todas as telas, exceto nas telas ultra-pequenas, que se empilharão automaticamente (100%):

Exemplo: Alinhamento Horizontal

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Coluna 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Coluna 2 ...</p>
    </div>
  </div>
</div>

Experimente pessoalmente

Dica:.col-sm-* O número na classe indica quantas colunas o div deve transcender (total de 12 colunas). Portanto,.col-sm-1 transcendendo 1 coluna.col-sm-4 transcendendo 4 colunas.col-sm-6 transcendendo 6 colunas, e assim por diante.

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

Dica:ao adicionar .container-fluid classe para .containerVocê pode alterar qualquer largura total conversão para largura fixa Layout responsivo:

Exemplo: Contêiner responsivo

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Coluna 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Coluna 2 ...</p>
    </div>
  </div>
</div>

Experimente pessoalmente

Colunas de layout automático

No Bootstrap 5, há uma maneira simples de criar colunas isômetricas para todos os dispositivos: basta remover .col-size-* Remova os números e use apenas no elemento col .col-size Classe. Bootstrap identifica quantas colunas há e cada coluna terá a mesma largura. As classes de tamanho (sm, md, etc.) determinam quando as colunas devem responder:

<!-- Duas colunas: 50% de largura em todos os dispositivos, exceto dispositivos ultra-pequenos (largura de 100%) -->
<div class="row">
  <div class="col-sm">1 de 2</div>
  <div class="col-sm">2 de 2</div>
</div>
<!-- Quatro colunas: 25% de largura em todos os dispositivos, exceto dispositivos ultra-pequenos (largura de 100%) -->
<div class="row">
  <div class="col-sm">1 de 4</div>
  <div class="col-sm">2 de 4</div>
  <div class="col-sm">3 de 4</div>
  <div class="col-sm">4 de 4</div>
</div>

Experimente pessoalmente