Les figures

Documentation et exemples pour afficher des images et du texte associés avec le composant figure dans Bootstrap.

Chaque fois que vous avez besoin d'afficher un élément de contenu, comme une image avec une légende facultative, pensez à utiliser un fichier <figure>.

Utilisez les classes incluses et .figurepour fournir des styles de base pour le HTML5 et les éléments. Les images en chiffres n'ont pas de taille explicite, alors assurez-vous d'ajouter la classe à votre pour la rendre réactive..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Aligner la légende de la figure est facile avec nos utilitaires de texte .

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>