Siffror

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

På den här sidan

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.

En bildtext till bilden ovan.

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

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

En bildtext till bilden ovan.

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