Bootstrap 5 - Grade: Dispositivos pequenos

Exemplo de grade de dispositivo pequeno

XPequeno Pequeno Médio Grande Extra Grande XXL
Prefixo da classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Largura da tela <576px >=576px >=768px >=992px >=1200px >=1400px

Suponhamos que tenhamos um layout simples com duas colunas. Para dispositivos pequenos, queremos dividir as colunas 25% / 75%.

O dispositivo pequeno é definido como largura da telaDe 576 pixels a 767 pixels.

Para dispositivos pequenos, usaremos .col-sm-* Classe.

Vamos adicionar as seguintes classes às duas colunas:

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

O exemplo a seguir gerará uma divisão 25% / 75% em dispositivos pequenos (e médios, grandes, ultra grandes e extra grandes). Em dispositivos ultra pequenos, ele se empilhará automaticamente (100%):

Exemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, seu símbolo é um panda gigante...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>Em 1980, o WWF foi formalmente convidado para a China, para realizar o trabalho de proteção do panda gigante e do seu habitat, convidado pelo governo chinês...</p>
    </div>
  </div>
</div>

Experimente pessoalmente

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):

Para divisão 33.3% / 66.6%, você deve usar .col-sm-4 e .col-sm-8Para divisão 50% / 50%, você deve usar .col-sm-6 e .col-sm-6):

Exemplo

33.3/66.6% split:
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, seu símbolo é um panda gigante...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>Em 1980, o WWF foi formalmente convidado para a China, para realizar o trabalho de proteção do panda gigante e do seu habitat, convidado pelo governo chinês...</p>
    </div>
  </div>
</div>
<!-- Divisão de 50/50%: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, seu símbolo é um panda gigante...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Em 1980, o WWF foi formalmente convidado para a China, para realizar o trabalho de proteção do panda gigante e do seu habitat, convidado pelo governo chinês...</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 partir de .col-sm-* remova os números e apenas elemento colusar .col-sm Classe. Bootstrap identificará quantas colunas há e cada coluna obterá a mesma largura.

Se o tamanho da telaMenos de 576pxAs colunas serão empilhadas horizontalmente:

<!-- Duas colunas: 50% de largura em todas as telas, exceto dispositivos extra 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 telas, exceto dispositivos extra 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

O próximo capítulo mostrará como adicionar diferentes porcentagens de divisão para dispositivos de tamanho médio.