Bootstrap 4 Grid - Grande

Exemplo de grade grande

No capítulo anterior, apresentamos um exemplo de grid com classes para pequenos e médios dispositivos. Usamos duas divs (colunas) e demos a elas uma divisão de 25%/75% em dispositivos pequenos e uma divisão de 50%/50% em dispositivos médios:

Mas em dispositivos grandes, o design pode ser melhor com uma divisão de 33%/66%.

Para dispositivos grandes, usaremos as .col-lg-*classes:

Agora o Bootstrap vai dizer "no tamanho pequeno, olhe para as classes com -sm- neles e use-as. No tamanho médio, olhe para as classes com -md- neles e use-as. No tamanho grande, olhe para classes com a palavra -lg- nelas e use-as".

O exemplo a seguir resultará em uma divisão de 25%/75% em dispositivos pequenos, uma divisão de 50%/50% em dispositivos médios e uma divisão de 33%/66% em dispositivos grandes e extragrandes. Em dispositivos extra pequenos, ele empilhará automaticamente (100%):

Usando apenas grandes

No exemplo abaixo, especificamos apenas a .col-lg-6classe (sem .col-md-*e/ou .col-sm-*). Isso significa que dispositivos grandes e extragrandes dividirão 50%/50%. No entanto, para dispositivos médios, pequenos E extra pequenos, ele será empilhado verticalmente (100% de largura):

Colunas de layout automático

No Bootstrap 4, há uma maneira fácil de criar colunas de largura igual para todos os dispositivos: basta remover o número de .col-lg-*e usar a .col-lgclasse apenas em um número especificado de elementos col . O Bootstrap reconhecerá quantas colunas existem e cada coluna terá a mesma largura.

Se o tamanho da tela for menor que 992px , as colunas serão empilhadas horizontalmente: