Griglia Bootstrap 4 - Grande

Esempio di griglia grande

Nel capitolo precedente abbiamo presentato un esempio di griglia con classi per dispositivi piccoli e medi. Abbiamo utilizzato due div (colonne) e abbiamo assegnato loro una divisione del 25%/75% sui dispositivi piccoli e una divisione del 50%/50% sui dispositivi medi:

Ma su dispositivi di grandi dimensioni il design potrebbe essere migliore con una divisione del 33%/66%.

Per dispositivi di grandi dimensioni utilizzeremo le .col-lg-*classi:

Ora Bootstrap dirà "alla piccola dimensione, guarda le classi con -sm- al loro interno e usa quelle. Alla dimensione media, guarda le classi con -md- al loro interno e usa quelle. Alla dimensione grande, guarda classi con la parola -lg- in esse e usa quelle".

L'esempio seguente risulterà in una divisione del 25%/75% sui dispositivi piccoli, una divisione del 50%/50% sui dispositivi medi e una divisione del 33%/66% sui dispositivi grandi e xlarge. Su dispositivi extra piccoli, si accumulerà automaticamente (100%):

Usando solo grande

Nell'esempio seguente, specifichiamo solo la .col-lg-6classe (senza .col-md-*e/o .col-sm-*). Ciò significa che i dispositivi grandi e xlarge si divideranno del 50%/50%. Tuttavia, per dispositivi medi, piccoli ED extra piccoli, verrà impilato verticalmente (100% di larghezza):

Colonne con layout automatico

In Bootstrap 4, c'è un modo semplice per creare colonne di uguale larghezza per tutti i dispositivi: basta rimuovere il numero da .col-lg-*e usare la .col-lgclasse solo su un numero specificato di elementi col . Bootstrap riconoscerà quante colonne ci sono e ogni colonna avrà la stessa larghezza.

Se la dimensione dello schermo è inferiore a 992px , le colonne verranno impilate orizzontalmente: