Exemplo de Grade Bootstrap 5
- Página anterior Grade BS5 XXL
- Próxima página Modelo básico BS5
A seguir, organizamos alguns exemplos de layout de grade Bootstrap 5.
Três colunas iguais
Use em um número específico de elementos .col Classe, o Bootstrap identificará quantos elementos há (e criará colunas de largura igual). No exemplo a seguir, usamos três elementos col, cada um com 33.33% de largura.
Exemplo
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Três colunas iguais usando números
Você também pode usar números para controlar a largura das colunas. Apenas certifique-se de que a soma seja igual ou menor que 12 (não é necessário usar todos os 12 colunas disponíveis):
Exemplo
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Três colunas diferentes
Para criar colunas diferentes, você deve usar números. O exemplo a seguir criará uma divisão de 25%/50%/25%:
Exemplo
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Definir largura de uma coluna
No entanto, definir apenas a largura de uma coluna é suficiente, e deixe as colunas vizinhas ajustarem automaticamente o tamanho. O exemplo a seguir criará uma divisão de 25%/50%/25%:
Exemplo
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Mais colunas iguais
Exemplo
<!-- Duas colunas iguais --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- Quatro colunas iguais --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 de 4</div> <div class="col">4 de 4</div> </div> <!-- Seis colunas iguais --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Você também pode usar .row-cols-* O controle de classe deve aparecer nas colunas ao lado umas das outras (independentemente do número de colunas):
Exemplo
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 de 4</div> <div class="col">4 de 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Mais colunas diferentes
Exemplo
<!-- Duas colunas diferentes --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Quatro colunas diferentes --> <div class="row"> <div class="col-2">1 de 4</div> <div class="col-2">2 de 4</div> <div class="col-2">3 de 4</div> <div class="col-6">4 de 4</div> </div> <!-- Definindo larguras de duas colunas --> <div class="row"> <div class="col-4">1 de 4</div> <div class="col-6">2 de 4</div> <div class="col">3 de 4</div> <div class="col">4 de 4</div> </div>
Alturas iguais
Se uma coluna for mais alta que a outra (devido ao texto ou à altura CSS), as outras seguirão:
Exemplo
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Colunas aninhadas
O exemplo a seguir mostra como criar um layout de duas colunas, onde uma coluna contém outras duas colunas:
Exemplo
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Classes de resposta
O sistema de grade do Bootstrap 5 possui cinco 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 médios - 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)
É possível combinar essas classes para criar layouts mais dinâmicos e flexíveis.
Dica:Cada classe é ampliada proporcionalmente, portanto, se você desejar sm e md Para definir a mesma largura, é necessário especificar sm。
Empilhado para horizontal
O exemplo a seguir mostra como criar um layout de colunas, que começa empilhado em dispositivos ultra-pequenos e se torna horizontal em dispositivos maiores (sm, md, lg e xl):
Exemplo
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mix e Match
Exemplo
<!-- Divisão de 50%/50% em dispositivos ultrapequenos, 75%/25% em dispositivos grandes --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Divisão de 58%/42% em dispositivos ultrapequenos, pequenos, médios, 66.3%/33.3% em dispositivos grandes e ultragrandes --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Divisão de 25%/75% em dispositivos pequenos, 50%/50% em dispositivos de tamanho médio, 33%/66% em dispositivos grandes e ultragrandes. Em dispositivos ultrapequenos, será empilhado automaticamente (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
Sem gutter
Para alterar o espaçamento entre as colunas (espaço adicional), use qualquer .g-1|2|3|4|5 Classe (.g-4 é o valor padrão).
Para remover completamente a margem de dobra (gutter), use .g-0：
Exemplo
<div class="row g-0">
- Página anterior Grade BS5 XXL
- Próxima página Modelo básico BS5
