Bootstrap — fiche de révision

Intégrer

<!-- dans le <head> -->
<link rel="stylesheet"
 href="…/bootstrap@5.3.8/dist/
 css/bootstrap.min.css">

<!-- avant </body> -->
<script src="…/bootstrap@5.3.8/
 dist/js/bootstrap.bundle.min.js">
</script>

Toujours épingler la version. Le CSS seul ne rend rien interactif (navbar, modales).

La grille

container → row → col-*

12 colonnes par ligne, toujours.

col-* = 12 ÷ (éléments par ligne)

`col-12`	1 par ligne
`col-6`	2 par ligne
`col-4`	3 par ligne
`col-3`	4 par ligne
`col-2`	6 par ligne

Total > 12 → retour à la ligne silencieux.

Points de rupture

Préfixe	À partir de
(aucun)	0 px — mobile
`sm`	576 px
`md`	768 px — tablette
`lg`	992 px — PC
`xl`	1200 px
`xxl`	1400 px

« à partir de », jamais « seulement sur ». Chaque palier écrase le précédent, vers le haut.

Le motif à retenir

<div class="col-12
            col-md-6
            col-lg-3">

1 par ligne sur mobile · 2 sur tablette · 4 sur ordinateur. Du plus petit au plus grand.

Espacements

m ou p + côté + 0…5

`t` / `b`	haut / bas
`s` / `e`	start / end
`x` / `y`	horizontal / vertical
rien	les 4 côtés

mb-3 · p-4 · py-3 · mt-5

⚡ Piège de version

Bootstrap 4	Bootstrap 5
`ml-3`	`ms-3`
`mr-3`	`me-3`
`pl-`/`pr-`	`ps-`/`pe-`

Une classe inexistante ne déclenche aucune erreur — elle ne fait rien. Si une marge reste sans effet, regardez cette lettre.

Couleurs

`text-primary`	bleu
`text-success`	vert
`text-danger`	rouge
`text-secondary`	gris
`bg-dark` · `bg-light`	fonds

Composants

`btn btn-primary`	bouton (couleur obligatoire)
`card` · `card-body`	carte + son contenu
`card-title` · `card-text`	titre · texte
`card-img-top`	image en haut
`form-control`	champ de saisie
`form-label`	étiquette
`img-fluid`	image responsive
`h-100`	hauteur pleine — cartes alignées

Personnaliser

<link … bootstrap.min.css>
<link … style.css>   ← APRÈS

Sa feuille se charge après Bootstrap, sinon elle est écrasée. En cas de conflit : sélecteur plus spécifique, pas !important.

Ce que Bootstrap ne fait PAS

Il ne valide pas les formulaires : name, required, method, action restent du HTML.
Il ne marche pas hors-ligne si chargé par CDN.
Il ne dispense pas de connaître Flexbox : row/col, c'est du Flexbox déguisé.

Les 3 oublis de grille

Pas de row autour des colonnes.
Total ≠ 12.
Du contenu directement dans la row (tout enfant doit être une col-*).