Les figures

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

Sur cette page

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>

Une légende pour l'image ci-dessus.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <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 .

Une légende pour l'image ci-dessus.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Toupet

variables

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;