Grille Bootstrap 4 - Très grande

Exemple de grille XLarge

Dans le chapitre précédent, nous avons présenté un exemple de grille avec des classes pour les petits et moyens appareils. Nous avons utilisé deux divs (colonnes) et nous leur avons donné une répartition de 25 %/75 % sur les petits appareils, et une répartition de 50 %/50 % sur les appareils moyens et une répartition de 33 %/66 % sur les gros appareils :

Mais sur les appareils xlarge, la conception peut être meilleure en tant que répartition 20%/80%.

Pour les appareils xlarge, nous utiliserons les .col-xl-*classes :

L'exemple suivant se traduira par une répartition de 25 %/75 % sur les petits appareils, une répartition de 50 %/50 % sur les appareils moyens, une répartition de 33 %/66 % sur les grands appareils et une répartition de 20 %/80 % sur les très grands appareils. Sur les très petits appareils, il s'empilera automatiquement (100 %) :

Utiliser uniquement XLarge

Dans l'exemple ci-dessous, nous spécifions uniquement la .col-xl-6classe (sans .col-lg-*, .col-md-*et/ou .col-sm-*). Cela signifie que les appareils xlarge se partageront 50 %/50 %. Cependant, pour les appareils grands, moyens, petits ET très petits, il s'empilera verticalement (100 % de largeur) :

Colonnes de disposition automatique

Dans Bootstrap 4, il existe un moyen simple de créer des colonnes de largeur égale pour tous les appareils : il suffit de supprimer le nombre de .col-xl-*et d'utiliser uniquement la .col-xlclasse sur un nombre spécifié d' éléments col . Bootstrap reconnaîtra le nombre de colonnes et chaque colonne aura la même largeur.

Si la taille de l'écran est inférieure à 1200px , les colonnes s'empileront horizontalement :