Source

Figure

Documentazione ed esempi per la visualizzazione di immagini e testo correlati con il componente figura in Bootstrap.

Ogni volta che devi visualizzare un contenuto, come un'immagine con una didascalia facoltativa, prendi in considerazione l'utilizzo di un file <figure>.

Usa le classi incluse e .figureper fornire alcuni stili di base per HTML5 e gli elementi. Le immagini nelle figure non hanno dimensioni esplicite, quindi assicurati di aggiungere la classe alla tua per renderla reattiva..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

400x300
Una didascalia per l'immagine sopra.
<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>

Allineare la didascalia della figura è facile con le nostre utilità di testo .

400x300
Una didascalia per l'immagine sopra.
<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>