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 <chiffre>
.
Utilisez les classes .figure
, .figure-img
et .figure-caption
incluses pour fournir des styles de base pour le Éléments <figure>
et <figcaption>
. Les images en chiffres n'ont pas de taille explicite, alors assurez-vous d'ajouter la classe .img-fluid
à votre <img>
pour le rendre réactif.
<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.
<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>
Sass
Variables
$figure-caption-font-size: $small-font-size;
$figure-caption-color: $gray-600;