Bootstrap 4 Griglia - Extra Large

Esempio di griglia XL

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 e una divisione del 33%/66% sui dispositivi di grandi dimensioni:

Ma su dispositivi xlarge il design potrebbe essere migliore con una suddivisione del 20%/80%.

Per i dispositivi xlarge utilizzeremo le .col-xl-*classi:

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

Usando solo XLarge

Nell'esempio seguente, specifichiamo solo la .col-xl-6classe (senza .col-lg-*, .col-md-*e/o .col-sm-*). Ciò significa che i dispositivi xlarge si divideranno del 50%/50%. Tuttavia, per dispositivi grandi, 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-xl-*e usare la .col-xlclasse 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 1200px , le colonne verranno impilate orizzontalmente: