Figuren

Documentatie en voorbeelden voor het weergeven van gerelateerde afbeeldingen en tekst met de figuurcomponent in Bootstrap.

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=".../400x300" 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>

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

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