Ga naar hoofdinhoud Ga naar navigatie in documenten
in English

Figuren

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

Op deze pagina

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.

Placeholder 400x300
Een onderschrift voor de bovenstaande afbeelding.
<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 .

Placeholder 400x300
Een onderschrift voor de bovenstaande afbeelding.
<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;