Quiz 02 — Grille & layout
⏱️ TL;DR — 50 questions sur containers, breakpoints, grille 12 colonnes, gouttières, flex et position (Partie 2). Réponds de tête, puis déplie.
1. Combien de breakpoints Bootstrap 5.3 définit-il ?
Réponse
Six : xs, sm, md, lg, xl, xxl.
2. À partir de quelle largeur commence md ?
Réponse
768 px.
3. À partir de quelle largeur commence lg ?
Réponse
992 px.
4. À partir de quelle largeur commence xxl ?
Réponse
1400 px.
5. En combien de colonnes une row est-elle divisée ?
Réponse
12.
6. Que fait col sans nombre ?
Réponse
Partage l’espace à parts égales avec les autres col.
7. Que fait col-auto ?
Réponse
La colonne prend la largeur de son contenu.
8. Trois types de containers ?
Réponse
.container, .container-fluid, .container-{bp}.
9. Que fait .container-fluid ?
Réponse
Toujours 100 % de large.
10. Que fait .container-lg en dessous de lg ?
Réponse
Il est fluide (100 %), puis se limite à partir de lg.
11. Que signifie « mobile-first » pour col-lg-4 ?
Réponse
S’applique à partir de lg ; en dessous, pleine largeur.
12. Quelle est l’ordre obligatoire de la grille ?
Réponse
container › row › col.
13. Que se passe-t-il si la somme des colonnes dépasse 12 ?
Réponse
Les colonnes passent à la ligne (wrap).
14. À quoi sert row-cols-md-3 ?
Réponse
Imposer 3 colonnes par ligne dès md, sans annoter chaque enfant.
15. Que fait offset-md-3 ?
Réponse
Décale la colonne de 3/12 vers la droite à partir de md.
16. Comment centrer une colonne de 6/12 avec offset ?
Réponse
col-6 offset-3.
17. Que fait order-first ?
Réponse
order: -1 (placé en premier).
18. order change-t-il l’ordre du DOM ?
Réponse
Non, seulement l’ordre visuel.
19. Sur quel élément mettre align-items-center (grille) ?
Réponse
Sur la row.
20. align-self-end s’applique à quoi ?
Réponse
À une colonne (l’aligner en bas).
21. Quelle est la gouttière par défaut d’une row ?
Réponse
g-3 (1 rem).
22. Que contrôle gx-* ?
Réponse
L’espace horizontal entre colonnes.
23. Que contrôle gy-* ?
Réponse
L’espace vertical entre lignes qui wrappent.
24. Comment coller deux colonnes sans espace ?
Réponse
g-0 sur la row.
25. Techniquement, une gouttière c’est quoi ?
Réponse
Un padding sur les colonnes + marge négative sur la row.
26. Quelle variable CSS pilote la gouttière horizontale ?
Réponse
--bs-gutter-x.
27. Quelle classe active un conteneur flex ?
Réponse
d-flex.
28. Comme passer un conteneur flex en colonne ?
Réponse
flex-column.
29. Quelle classe pour un espace entre enfants flex sans marges ?
Réponse
gap-*.
30. Répartir les enfants avec espace maximal entre eux ?
Réponse
justify-content-between.
31. Faire grandir un enfant pour occuper l’espace libre ?
Réponse
flex-grow-1.
32. « Pousser » un élément flex à droite ?
Réponse
ms-auto.
33. Les valeurs de justify-content-* ?
Réponse
start, end, center, between, around, evenly.
34. Les valeurs de align-items-* ?
Réponse
start, end, center, baseline, stretch.
35. Centrer un bloc horizontal + vertical en flex ?
Réponse
d-flex justify-content-center align-items-center.
36. Quelle classe pour un header collé en haut au scroll ?
Réponse
sticky-top.
37. Quelle classe pour un footer toujours fixe en bas ?
Réponse
fixed-bottom.
38. Que fait translate-middle ?
Réponse
Décale de -50 % en X et Y (centrage exact sur l’ancrage).
39. Quelles classes de z-index en 5.3 ?
Réponse
z-n1, z-0, z-1, z-2, z-3.
40. position-absolute a besoin de quoi sur le parent ?
Réponse
Un contexte de positionnement (ex. position-relative).
41. Placer un badge en haut à droite d’un bouton, classes ?
Réponse
position-absolute top-0 start-100 translate-middle.
42. Bootstrap a-t-il une classe pour les colonnes typographiques ?
Réponse
Non — on utilise le CSS natif columns.
43. Que fait flex-md-row flex-column ?
Réponse
Colonne sur mobile, ligne à partir de md.
44. Largeurs max de .container à md ?
Réponse
720 px.
45. Comment centrer un bloc de largeur fixe horizontalement ?
Réponse
mx-auto (avec une largeur définie).
46. flex-fill fait quoi ?
Réponse
Les enfants s’égalisent en largeur pour remplir.
47. Sur mobile image avant texte, desktop inverse : comment ?
Réponse
order-1 order-md-2 / order-2 order-md-1.
48. Combien fait g-5 en rem ?
Réponse
3 rem.
49. Une colonne fixe + une qui prend le reste ?
Réponse
col-3 + col (sans nombre).
50. Peut-on modifier les breakpoints ?
Réponse
Oui, via $grid-breakpoints en Sass.
Quiz suivant : Quiz 03 — Contenu & typographie.