3.2 — Typographie

⏱️ TL;DR — Bootstrap fournit des classes de titres (.h1–.h6), des titres géants display (.display-1–.display-6), du texte accentué (.lead, .fw-bold, .fst-italic, .text-muted), des tailles (.fs-1–.fs-6) et des listes stylées (.list-unstyled, .list-inline). Le tout piloté par des variables CSS --bs-*.

🎯 Objectifs

• Appliquer des styles de titres sans changer la balise.
• Utiliser les titres display et le texte d’accroche.
• Contrôler taille, poids, casse et alignement du texte.

Titres

<h1>Titre H1</h1>
<!-- donner l'apparence d'un h3 à un h1 sémantique -->
<h1 class="h3">Sémantiquement H1, visuellement H3</h1>

Les classes .h1….h6 reproduisent l’apparence des titres sur n’importe quelle balise — utile pour garder la bonne sémantique tout en ajustant le visuel.

Titres display

<h1 class="display-1">Énorme</h1>
<h1 class="display-4">Grand titre de hero</h1>

.display-1 à .display-6 : des titres surdimensionnés pour les sections « hero ».

Texte

<p class="lead">Un paragraphe d'accroche, plus grand.</p>
<p class="fs-4">Taille 4</p>
<p class="fw-bold">Gras</p> <p class="fw-light">Léger</p>
<p class="fst-italic">Italique</p>
<p class="text-decoration-underline">Souligné</p>
<p class="text-uppercase">majuscules</p>
<p class="text-truncate" style="max-width:150px">Texte très long coupé par des points de suspension…</p>

Familles de classes :

• Taille : fs-1 (grand) … fs-6 (petit).
• Poids : fw-bold, fw-semibold, fw-normal, fw-light, fw-bolder.
• Style : fst-italic, fst-normal.
• Casse : text-lowercase, text-uppercase, text-capitalize.
• Alignement : text-start, text-center, text-end (+ responsives text-md-center).
• Coupe : text-truncate (une ligne + ellipsis), text-wrap, text-nowrap, text-break.

Listes

<ul class="list-unstyled">…</ul>   <!-- sans puces ni marge -->
<ul class="list-inline">
  <li class="list-inline-item">A</li>
  <li class="list-inline-item">B</li>
</ul>

💡 Pour un dev React — La séparation « sémantique vs apparence » (<h1 class="h3">) est précieuse pour l’accessibilité et le SEO : gardez la hiérarchie h1 > h2 > h3 correcte dans le DOM, ajustez seulement le style avec les classes.

✏️ Exercices

1. Un titre de section doit rester un <h2> pour la structure, mais avoir la taille d’un <h4>. Comment ?

2. Couper un nom de fichier trop long sur une seule ligne avec « … ».

🧠 Quiz de révision

Chapitre suivant : 3.3 — Images & figures