Figure

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>

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

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

<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

Variabili

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