Figurer

Dokumentasjon og eksempler for visning av relaterte bilder og tekst med figurkomponenten i Bootstrap.

Når som helst du trenger å vise et innhold – som et bilde med en valgfri bildetekst, bør du vurdere å bruke en <figure>.

Bruk de inkluderte .figure, .figure-imgog .figure-captionklassene for å gi noen grunnlinjestiler for HTML5 <figure>og <figcaption>elementene. Bilder i figurer har ingen eksplisitt størrelse, så sørg for å legge til .img-fluidklassen for <img>å gjøre den responsiv.

<figure class="figure">
  <img src="..." 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 enkelt å justere figurens bildetekst med våre tekstverktøy .

<figure class="figure">
  <img src="..." 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>