Django - 4.5 Maîtriser la grille Bootstrap

La grille Bootstrap organise la mise en page avec des conteneurs, des lignes et des colonnes. Elle repose sur Flexbox et s'adapte automatiquement à la taille de l'écran. Cette leçon montre comment créer des colonnes égales, puis adapter leur largeur selon les points d'arrêt.

Conteneur, ligne et colonne

Le contenu se place dans un conteneur centré sur la page. Ce conteneur accueille des lignes, et chaque ligne accueille des colonnes.

Une colonne sans largeur précise se partage automatiquement l'espace disponible. Dans l'exemple, trois colonnes de largeur égale s'affichent sur tous les écrans.

<div class="container">
  <div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>

Les points d'arrêt

Le système de grille comporte six points d'arrêt par défaut : XS, SM, MD, LG, XL et XXL, du plus petit au plus grand écran.

Chaque point d'arrêt a son propre préfixe de classe, comme col-md- pour le point MD, suivi du nombre de colonnes voulu. Le système peut aussi être personnalisé.

Adapter les colonnes

Une ligne peut être divisée en plusieurs parties : une colonne sur trois, deux colonnes sur trois, deux colonnes sur deux, et ainsi de suite.

Une ligne qui ne contient qu'une seule colonne occupe toute la largeur disponible.

Dans l'exemple, le formulaire est remplacé par le système de grille. Il suffit de copier le code, puis d'adapter les classes à votre mise en page.

<div class="row">
  <div class="col-md-4">...</div>
  <div class="col-md-8">...</div>
</div>

En résumé

La grille Bootstrap repose sur des conteneurs, des lignes et des colonnes. Les classes de colonnes changent selon le point d'arrêt, ce qui rend la mise en page réactive. Réduisez la fenêtre du navigateur pour voir le résultat.

Points clés

• Un conteneur centre le contenu, et une ligne regroupe les colonnes.
• Une colonne sans largeur précise se partage l'espace disponible.
• Six points d'arrêt par défaut : XS, SM, MD, LG, XL et XXL.
• Chaque point d'arrêt a son préfixe de classe, par exemple col-md-.
• Les classes de colonnes se combinent pour diviser une ligne en plusieurs parties.

Questions fréquentes

Qu'est-ce qu'un point d'arrêt ?

C'est une largeur d'écran à partir de laquelle une classe de grille s'applique. Chaque point d'arrêt correspond à une taille d'écran différente.

Quelle différence entre row et col ?

La classe row crée une ligne qui regroupe les colonnes. La classe col crée une colonne à l'intérieur de cette ligne.

Peut-on personnaliser les points d'arrêt ?

Oui. La vidéo précise qu'on peut les personnaliser, en plus des six valeurs par défaut.