Bootstrap Grid - Dispositivos Grandes

Exemplo de grade de bootstrap: dispositivos grandes

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%.

Dica: os dispositivos grandes são definidos como tendo uma largura de tela de 1.200 pixels e acima .

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

Então agora vamos adicionar as larguras das colunas para dispositivos grandes:

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:

Usando apenas grandes

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