Figurer

Når som helst du har brug for at vise et stykke indhold – som et billede med en valgfri billedtekst, kan du overveje at bruge en <figure>.

Brug de inkluderede .figure, .figure-imgog .figure-captionklasser til at give nogle baseline-stile til HTML5 <figure>og <figcaption>elementer. Billeder i figurer har ingen eksplicit størrelse, så sørg for at tilføje .img-fluidklassen til din <img>for at gøre den responsiv.

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

Det er nemt at justere figurens billedtekst med vores tekstværktøjer .

<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

Variabler

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