Skip to Content
BootstrapPartie 3 — Contenu & typographie3.1 — Reboot : le reset de Bootstrap

3.1 — Reboot : le reset de Bootstrap

⏱️ TL;DR — Le Reboot est le reset CSS de Bootstrap, bâti sur normalize.css. Il uniformise le rendu des éléments HTML entre navigateurs : box-sizing: border-box partout, marges nettoyées, font héritée, titres et listes cohérents. Il travaille sur les balises (pas des classes), donc il s’applique dès que Bootstrap est chargé.

🎯 Objectifs

  • Comprendre le rôle et la portée du Reboot.
  • Connaître ses décisions marquantes.

Ce que fait le Reboot

  • box-sizing: border-box sur tous les éléments : padding et bordure inclus dans la largeur. Fini les calculs de débordement.
  • Marges du haut supprimées sur les blocs (titres, paragraphes) : seules les marges du bas subsistent, pour un rythme vertical cohérent.
  • font-family native : Bootstrap utilise la system font stack (la police du système d’exploitation) par défaut — rapide, familière, sans web font à charger.
  • Liens, listes, tableaux normalisés (couleurs, puces, espacements).
  • rem comme unité de base pour respecter la taille de police de l’utilisateur (accessibilité).
/* extrait de l'esprit du Reboot */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--bs-body-font-family); line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }

Portée : balises, pas classes

Le Reboot cible les éléments (body, h1, table, a…). Il s’applique donc globalement dès l’inclusion de Bootstrap, sans que vous ajoutiez de classe. C’est pourquoi une page « nue » avec Bootstrap a déjà un rendu propre et homogène.

⚠️ Piège — Si vous intégrez Bootstrap dans un site existant, le Reboot modifie le rendu des balises globales (marges, tailles). C’est souvent souhaitable, mais peut « bouger » un design historique. Dans ce cas, envisagez bootstrap-reboot.css seul, ou une intégration scoppée.

💡 Pour un dev React — Le Reboot joue le même rôle que le preflight de Tailwind : une base normalisée. Si vous combinez les deux (rare), attendez-vous à des conflits sur box-sizing, marges et titres — choisissez-en un.

✏️ Exercices

  1. Pourquoi vos paragraphes n’ont-ils pas de marge en haut avec Bootstrap ?

✅ Solution

Le Reboot supprime les margin-top des blocs et ne garde que margin-bottom, pour un rythme vertical régulier.

🧠 Quiz de révision

1. Sur quelle base le Reboot est-il construit ?

Sur normalize.css.

2. Quelle valeur de box-sizing applique-t-il partout ?

border-box.

3. Le Reboot cible-t-il des classes ou des balises ?

Des balises (éléments HTML), pas des classes.

4. Quelle police par défaut utilise Bootstrap ?

La system font stack (police native du système).

5. Quel fichier n’inclut QUE le Reboot ?

bootstrap-reboot.css.

Chapitre suivant : 3.2 — Typographie

Vue d'ensemble3.2 — Typographie