Figuren

Telkens wanneer u een stuk inhoud moet weergeven, zoals een afbeelding met een optioneel bijschrift, kunt u overwegen een <figure>.

Gebruik de meegeleverde .figure, .figure-imgen .figure-captionklassen om enkele basislijnstijlen voor de HTML5 <figure>en <figcaption>elementen te bieden. Afbeeldingen in figuren hebben geen expliciete grootte, dus zorg ervoor dat u de .img-fluidklasse aan uw klasse toevoegt <img>om deze responsief te maken.

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

Het uitlijnen van het bijschrift van de figuur is eenvoudig met onze teksthulpprogramma's .

<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

Variabelen

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;