Grade Bootstrap 5: Dispositivos Extra Grandes

Exemplo de grade de dispositivo ultra-grande

XSmall Small Medium Large Extra Large XXL
Prefixo de classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Largura da tela <576px >=576px >=768px >=992px >=1200px >=1400px

No capítulo anterior, mostramos um exemplo de grade que contém classes para dispositivos pequenos, médios e grandes. Usamos dois div (colunas) e fizemos uma divisão de 25%/75% em dispositivos pequenos, 50%/50% em dispositivos médios e 33%/66% em dispositivos grandes:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Mas no dispositivo xlarge, o design de divisão 20% / 80% pode ser melhor.

Os dispositivos ultra-grandes são definidos como largura da tela de 1200 pixels ou mais.

Para dispositivos xlarge, usaremos .col-xl-* Classe:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

O exemplo a seguir resultará em divisão de 25%/75% em dispositivos de pequeno porte, 50%/50% em dispositivos de tamanho médio, 33%/66% em dispositivos grandes, e 20%/80% em dispositivos xlarge e xxlarge. No dispositivo ultra-pequeno, ele se empilhará automaticamente (100%):

Exemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, tem como símbolo um panda gigante...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <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, conforme convite do governo chinês...</p>
    </div>
  </div>
</div>

Experimente pessoalmente

Atenção:Certifique-se de que a soma seja sempre 12.

Use apenas XLarge

No exemplo a seguir, especificamos apenas .col-xl-6 classe (sem .col-lg-*,.col-md-* e/ou .col-sm-*）。 Isso significa que os dispositivos xlarge e xxlarge dividirão 50%/50%. No entanto, para dispositivos grandes, médios, pequenos e ultra-pequenos, eles serão empilhados verticalmente (largura 100%):

Exemplo

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>A Fundação Mundial para a Natureza (WWF), fundada em 29 de abril de 1961, tem como símbolo um panda gigante...</p>
    </div>
    <div class="col-xl-6">
      <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, conforme convite do 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-xl-* Remova os números e use apenas no elemento col .col-xl Classe. Bootstrap identificará quantas colunas há e cada coluna terá a mesma largura.

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

<!-- Duas colunas: em dispositivos acima do ultra-grande são 50% de largura -->
<div class="row">
  <div class="col-xl">1 de 2</div>
  <div class="col-xl">2 de 2</div>
</div>
<!-- Quatro colunas: em dispositivos acima do ultra-grande são 25% de largura -->
<div class="row">
  <div class="col-xl">1 de 4</div>
  <div class="col-xl">2 de 4</div>
  <div class="col-xl">3 de 4</div>
  <div class="col-xl">4 de 4</div>
</div>

Experimente pessoalmente