Bootstrap — QCM

1Combien de colonnes compte une ligne de la grille Bootstrap ?

Toujours 12, quelle que soit la largeur de l'écran. C'est pour cela que 12 se divise si bien : 2, 3, 4 et 6 éléments par ligne tombent juste. Le calcul est col-* = 12 ÷ (éléments par ligne).

2Combien d'éléments par ligne donne col-4 ?

12 ÷ 4 = 3. Le chiffre de la classe est le nombre de colonnes occupées, pas le nombre d'éléments : col-4 en prend 4 sur 12, donc il en tient trois par ligne. col-3 en met quatre, col-6 en met deux.

3Que signifie le préfixe md dans col-md-6 ?

Les points de rupture se lisent « à partir de », jamais « seulement sur ». md vaut donc de 768 px jusqu'en haut, tant qu'un palier supérieur (lg, xl) ne le remplace pas. C'est ce qui rend la déclaration mobile-first économique : on ne redit que ce qui change.

4Une marge à gauche en Bootstrap 5 s'écrit :

Bootstrap 5 est passé aux côtés logiques : s pour start, e pour end — ce qui suit le sens de lecture de la langue. ml- et mr- étaient la forme de Bootstrap 4 ; ils ne font plus rien en 5.

5Dans quel ordre charger bootstrap.min.css et sa propre feuille style.css ?

À spécificité égale, c'est la dernière règle lue qui gagne. Une feuille personnelle chargée avant Bootstrap se fait donc écraser par lui. Et en cas de conflit persistant, on augmente la spécificité du sélecteur — pas !important, qui se paie au coup suivant.

6Une row contient col-6, col-6 et col-4. Que se passe-t-il ?

16 dépasse 12 : le surplus déborde sur une nouvelle ligne, en silence. Aucun message, aucune erreur — juste une mise en page inattendue. C'est le premier des trois oublis de grille à vérifier, avec la row absente et du contenu posé hors d'une col-*.

7La navbar responsive ne s'ouvre pas au clic. Qu'est-ce qui manque ?

Le CSS seul ne rend rien interactif. Menu déroulant, modale, accordéon, navbar rétractable : tous ont besoin du bootstrap.bundle.min.js, chargé avant </body>. Sans lui la page est belle et parfaitement inerte.

8Que Bootstrap ne fait PAS à votre place ?

form-control et form-label ne sont que de l'habillage. La validation reste du HTML — name, required, method, action — et du contrôle côté serveur. Bootstrap donne l'apparence d'un formulaire sérieux, pas son fonctionnement.

9Vous écrivez mb-7. Que se passe-t-il ?

L'échelle d'espacement s'arrête à 5. Or une classe CSS inexistante ne déclenche aucune erreur : elle ne correspond simplement à aucune règle. C'est ce qui rend ces fautes coûteuses à trouver — quand une marge reste sans effet, suspectez d'abord le nom de la classe.

10Trois cartes côte à côte n'ont pas la même hauteur. Quelle classe règle cela ?

h-100 demande à la carte de remplir toute la hauteur de sa colonne. Comme les colonnes d'une même row sont déjà à la même hauteur (c'est du Flexbox en dessous), les cartes s'alignent. Sans elle, chaque carte s'arrête à son propre contenu.