Module 1Les bases de Bootstrap
Chapitre 2 sur 9
La grille de Bootstrap
Construire des mises en page responsives avec la grille en 12 colonnes.
- ≈ 120 min
- 4 leçons
- 3 vidéos
- 3 exercices
Module 1Les bases de Bootstrap
Chapitre 2 sur 9
Construire des mises en page responsives avec la grille en 12 colonnes.
Objectifs
Avec ce chapitre, tu sauras…
.container, .row et .col ;col-sm-*, col-md-*, col-lg-* ;row-cols-* ;g-*.La grille est le cœur de Bootstrap. Elle repose sur Flexbox (formation CSS, chapitre 9) et permet de créer en quelques classes une mise en page qui passe d'une colonne sur téléphone à trois ou quatre colonnes sur ordinateur.
Leçon 1
<div class="container">
<div class="row">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
</div>
</div>Tableau: Correspondance des colonnes
| Classe | Parts sur 12 | Largeur |
|---|---|---|
col-12 | 12 | 100 % |
col-6 | 6 | 50 % |
col-4 | 4 | 33,33 % |
col-3 | 3 | 25 % |
col-8 + col-4 | 8 + 4 | deux tiers / un tiers |
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Vidéo · À regarder
ENBootstrap 5 Crash Course
Web Dev Simplified · YouTube
Leçon 2
| Écran | Classe active | Résultat |
|---|---|---|
| moins de 768 px | col-12 | 1 produit par ligne |
| de 768 à 991 px | col-md-6 | 2 produits par ligne |
| 992 px et plus | col-lg-3 | 4 produits par ligne |
Leçon 3
| Classe | Effet |
|---|---|
offset-md-2 | décale la colonne de 2 parts vers la droite à partir de md |
order-first, order-last, order-2 | change l'ordre d'affichage |
order-md-1 | ordre appliqué à partir de md |
justify-content-center (sur la .row) | centre les colonnes horizontalement |
align-items-center (sur la .row) | centre les colonnes verticalement |
Leçon 4
Classe (sur la .row) | Effet |
|---|---|
g-0 | aucune gouttière |
g-3, g-4… | gouttière horizontale et verticale |
gx-5 | seulement horizontale |
gy-3 | seulement verticale (utile quand les colonnes passent à la ligne) |
1En combien de parts une ligne est-elle divisée ?
2col-md-4 occupe…
3Où place-t-on le contenu ?
4row-cols-3 sur une ligne donne…
5Pour décaler une colonne de 3 parts à partir de lg :
6g-0 sur une .row…
L'essentiel du chapitre
.container → .row → colonnes → contenu. Une .row ne contient que des colonnes.col-6 = moitié, col-4 = tiers, col-3 = quart.col-md-6 col-lg-3 (mobile first : la classe vaut à partir du point indiqué)..col (égales), .col-auto (contenu), row-cols-* (nombre par ligne).offset-*, order-*, justify-content-*, align-items-* ; gouttières g-*, gx-*, gy-*.col-12 est souvent inutile
| Classe | Effet |
|---|---|
.col | partage l'espace à parts égales avec les autres .col |
.col-auto | largeur de son contenu |
.row-cols-2 (sur la .row) | 2 colonnes par ligne, quel que soit le nombre d'enfants |
.row-cols-1 .row-cols-md-3 | 1 par ligne sur mobile, 3 à partir de md |
Vidéo · À regarder
FRApprendre BOOTSTRAP 5 & HTML en créant son CV Web [TUTO COMPLET]
H2Prog · YouTube
align-self-end (sur une colonne) | aligne une seule colonne |
Si la somme des colonnes d'une ligne dépasse 12 (col-8 + col-6), la colonne en trop passe à la ligne suivante. Ce n'est pas une erreur, c'est même utile pour des galeries ; mais si tu ne t'y attends pas, la mise en page semble cassée.
Les colonnes (anglais) : la grille en 12 parts, les colonnes automatiques et les colonnes responsives. C'est le segment de référence de ce chapitre.
Les lignes (anglais) : row, row-cols-* et le comportement des lignes.
On combine les points de rupture du chapitre 1 avec la taille des colonnes : col-{point}-{parts}.
<div class="row">
<div class="col-12 col-md-6 col-lg-3">Produit 1</div>
<div class="col-12 col-md-6 col-lg-3">Produit 2</div>
<div class="col-12 col-md-6 col-lg-3">Produit 3</div>
<div class="col-12 col-md-6 col-lg-3">Produit 4</div>
</div>Tableau: Lire col-12 col-md-6 col-lg-3
Tableau: Les classes de placement
Les gouttières (gutters) sont les espaces entre les colonnes.
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4">
<div class="col"><img src="img1.jpg" class="img-fluid rounded" alt="..."></div>
<div class="col"><img src="img2.jpg" class="img-fluid rounded" alt="..."></div>
<div class="col"><img src="img3.jpg" class="img-fluid rounded" alt="..."></div>
<div class="col"><img src="img4.jpg" class="img-fluid rounded" alt="..."></div>
</div>La gouttière est faite de padding sur les colonnes. Si tu mets un fond coloré sur la colonne, il recouvre la gouttière et les blocs se touchent. Mets le fond sur un élément à l'intérieur de la colonne (une carte, une div).
<div class="row">
<h2>Nos services</h2>
<div class="col-md-6 bg-light">Service A</div>
<div class="col-md-8 bg-light">Service B</div>
</div>Explique les trois problèmes de ce code et corrige-le.
Crée une page avec un contenu principal et une barre latérale : sur mobile, les deux sont empilés ; à partir de lg, le contenu occupe 8 colonnes et la barre latérale 4.
Affiche 8 cartes produits : 1 par ligne sur mobile, 2 à partir de sm, 3 à partir de md, 4 à partir de xl, avec une gouttière de niveau 4. Utilise row-cols-*.
Une colonne sans classe pour les petits écrans prend déjà toute la largeur sous son premier point de rupture. class="col-md-6 col-lg-3" donne le même résultat que l'exemple : col-12 peut être omis.
Tableau: Les colonnes automatiques et row-cols
La structure et les colonnes dans un vrai projet, en français : H2Prog construit la mise en page de son CV avec la grille. Code le même squelette en même temps que lui.
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<!-- formulaire -->
</div>
</div>