Quiz 05 — Cartes & list group
⏱️ TL;DR — 50 questions sur les cartes (cards) et les list groups (Partie 4). Réponds de tête, puis déplie.
1. Quel élément contient titre et texte d’une carte ?
Réponse
.card-body.
2. Image en haut d’une carte ?
Réponse
.card-img-top.
3. Titre d’une carte ?
Réponse
.card-title.
4. Sous-titre d’une carte ?
Réponse
.card-subtitle.
5. En-tête / pied de carte ?
Réponse
.card-header / .card-footer.
6. Égaliser la hauteur de cartes en grille ?
Réponse
h-100 sur .card.
7. Texte par-dessus l’image d’une carte ?
Réponse
.card-img-overlay.
8. Coller une list group dans une carte sans bordures ?
Réponse
list-group list-group-flush.
9. Lien de carte ?
Réponse
.card-link.
10. Carte au fond coloré ?
Réponse
card text-bg-primary.
11. Carte avec bordure colorée ?
Réponse
card border-success.
12. Grille de 3 cartes responsive (1/2/3) ?
Réponse
row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4.
13. Où placer h-100 : colonne ou carte ?
Réponse
Sur la carte.
14. Image de fond d’une carte, classe ?
Réponse
.card-img.
15. Classe de base d’une list group ?
Réponse
.list-group.
16. Item de list group ?
Réponse
.list-group-item.
17. Rendre un item cliquable/survolable ?
Réponse
list-group-item-action.
18. Marquer l’item courant ?
Réponse
active.
19. Désactiver un item ?
Réponse
disabled.
20. Item coloré succès ?
Réponse
list-group-item-success.
21. Enlever bordures et coins d’une list group ?
Réponse
list-group-flush.
22. List group horizontale ?
Réponse
list-group-horizontal.
23. Aligner un badge à droite d’un item ?
Réponse
d-flex justify-content-between align-items-center.
24. Sur quelle balise faire une list group interactive ?
Réponse
<a> ou <button> (avec list-group-item-action).
25. Une carte avec image, titre, texte, bouton ?
Réponse
card-img-top + card-body (title, text, btn).
26. Sans h-100, quel problème avec deux cartes ?
Réponse
Hauteurs différentes → alignement cassé.
27. Couleur de texte atténué d’un sous-titre ?
Réponse
text-body-secondary.
28. La carte est-elle un bon candidat React réutilisable ?
Réponse
Oui — ex. <ProductCard> mappant des données.
29. Combiner carte + list group flush : quel rendu ?
Réponse
Une liste intégrée proprement dans la carte.
30. Fond doux « succès » d’un item ?
Réponse
Via les couleurs contextuelles list-group-item-*.
31. Badge compteur non lus par item, structure ?
Réponse
Item flex + badge rounded-pill.
32. Une carte pleine largeur : comment fixer sa largeur ?
Réponse
Style width ou via la grille (col).
33. Grille de cartes avec gouttières larges ?
Réponse
g-4 sur la row.
34. Un menu latéral avec list group : item actif par… ?
Réponse
L’état (en React) ou la classe active.
35. Sur quoi mettre active dans une list group de liens ?
Réponse
Sur le .list-group-item courant.
36. Peut-on mettre des composants dans un card-body ?
Réponse
Oui (n’importe quel contenu HTML).
37. Comment styliser un groupe de cartes cohérent ?
Réponse
Grille + h-100 + gouttières.
38. Une carte « badge sur un coin » a besoin de quoi sur la carte ?
Réponse
position-relative.
39. Différence header vs footer de carte ?
Réponse
En haut vs en bas du corps.
40. Les list groups servent souvent à… ?
Réponse
Menus, listes de sélection, listes riches.
41. Peut-on colorer tout le tableau d’items ?
Réponse
Oui, item par item avec les couleurs contextuelles.
42. card-subtitle avec marge basse ?
Réponse
card-subtitle mb-2.
43. Un card-header peut-il contenir une nav (onglets) ?
Réponse
Oui.
44. Les cartes ont-elles besoin de JS ?
Réponse
Non (sauf composants interactifs à l’intérieur).
45. Recadrer l’image d’une carte carrée ?
Réponse
object-fit-cover + dimensions.
46. Où mettre un bouton d’action d’une carte ?
Réponse
Dans le card-body (souvent en bas).
47. Une carte cliquable entière : bonne pratique ?
Réponse
Utiliser un lien couvrant (stretched-link).
48. Quelle classe pour un lien qui couvre toute la carte ?
Réponse
stretched-link.
49. Peut-on imbriquer une list group dans un card-body ?
Réponse
Oui, ou directement dans la carte (flush).
50. Résumé : carte = ?
Réponse
Un conteneur flexible avec header/body/footer, image et liens.
Quiz suivant : Quiz 06 — Navbar & navigation.