Figurer

Dokumentation og eksempler til visning af relaterede billeder og tekst med figurkomponenten i Bootstrap.

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=".../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>

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

<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>