Skip to Content
BootstrapPartie 3 — Contenu & typographie3.3 — Images & figures

3.3 — Images & figures

⏱️ TL;DR — img-fluid rend une image responsive (max-width: 100%; height: auto). img-thumbnail ajoute un cadre. Les formes se règlent avec rounded, rounded-circle, rounded-pill. Le composant <figure> + .figure-caption légende une image proprement.

🎯 Objectifs

  • Rendre les images responsives.
  • Arrondir, encadrer et aligner une image.
  • Légender une image avec figure.

Images responsives

<img src="photo.jpg" class="img-fluid" alt="Description">

img-fluid = l’image ne dépasse jamais son conteneur et garde ses proportions. À mettre systématiquement sur les images de contenu.

Formes et cadre

<img src="a.jpg" class="rounded" alt="…">          <!-- coins arrondis -->
<img src="a.jpg" class="rounded-circle" alt="…">   <!-- cercle (image carrée) -->
<img src="a.jpg" class="img-thumbnail" alt="…">    <!-- cadre + padding -->

Aligner une image

<!-- centrer une image en bloc -->
<img src="a.jpg" class="img-fluid d-block mx-auto" alt="…">
 
<!-- flotter à droite -->
<img src="a.jpg" class="rounded float-end" alt="…">

Figures légendées

<figure class="figure">
  <img src="paysage.jpg" class="figure-img img-fluid rounded" alt="Un paysage">
  <figcaption class="figure-caption">Photo prise en montagne.</figcaption>
</figure>

alt : toujours

L’attribut alt est indispensable pour l’accessibilité et le SEO. Décrivez l’image ; laissez alt="" uniquement pour une image purement décorative.

⚠️ Piège — rounded-circle ne fait un vrai cercle que sur une image carrée. Sur une image rectangulaire, vous obtenez une ellipse. Recadrez en carré (ou utilisez object-fit).

💡 Pour un dev React / Next.js — Le composant next/image gère déjà le responsive, le lazy-loading et l’optimisation. Combinez-le avec les classes de forme Bootstrap (className="rounded") mais évitez img-fluid dessus : next/image contrôle déjà les dimensions. Voir Partie 11.

✏️ Exercices

  1. Rendre un avatar carré parfaitement rond et centré.

✅ Solution

<img src="avatar.jpg" class="rounded-circle d-block mx-auto" alt="Avatar"> (l’image source doit être carrée).

  1. Légender une capture d’écran responsive.

✅ Solution

<figure class="figure">
  <img src="capture.png" class="figure-img img-fluid rounded" alt="Capture">
  <figcaption class="figure-caption">Le tableau de bord.</figcaption>
</figure>

🧠 Quiz de révision

1. Quelle classe rend une image responsive ?

img-fluid.

2. Comment centrer une image en bloc ?

d-block mx-auto.

3. rounded-circle fonctionne bien sur quelle forme d’image ?

Une image carrée (sinon on obtient une ellipse).

4. Quelle classe pour une image encadrée avec padding ?

img-thumbnail.

5. Quand mettre alt="" ?

Pour une image purement décorative (ignorée par les lecteurs d’écran).

Chapitre suivant : 3.4 — Tableaux

3.2 — Typographie3.4 — Tableaux