Grade de Bootstrap - Dispositivos Médios

Exemplo de grade de bootstrap: dispositivos médios

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

Mas em dispositivos médios o design pode ser melhor com uma divisão de 50%/50%.

Dica: os dispositivos médios são definidos como tendo uma largura de tela de 992 pixels a 1199 pixels .

Para dispositivos médios, usaremos as .col-md-*classes.

Agora vamos adicionar as larguras das colunas para dispositivos médios:

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

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

Usando apenas mídia

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

O próximo capítulo mostra como adicionar uma porcentagem de divisão diferente para dispositivos grandes.