Siffror

Dokumentation och exempel för att visa relaterade bilder och text med figurkomponenten i Bootstrap.

När du behöver visa ett stycke innehåll – som en bild med en valfri bildtext, överväg att använda en <figure>.

Använd de medföljande .figure, .figure-imgoch .figure-captionklasserna för att tillhandahålla några baslinjestilar för HTML5 <figure>och <figcaption>element. Bilder i figurer har ingen explicit storlek, så se till att lägga till .img-fluidklassen för <img>att göra 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>

Att justera figurens bildtext är enkelt med våra textverktyg .

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