Figurer

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

På denne siden

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.

En bildetekst for bildet ovenfor.

<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 enkelt å justere figurens bildetekst med våre tekstverktøy .

En bildetekst for bildet ovenfor.

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