Bootstrap 5.2 / Inhoud

Figures

Documentatie en voorbeelden voor het weergeven van bij elkaar horende afbeeldingen en tekst met het figure-component in Bootstrap.

Wanneer je een stuk content wilt weergeven — zoals een afbeelding met een optioneel bijschrift — overweeg dan een <figure> te gebruiken.

Gebruik de meegeleverde klassen .figure, .figure-img en .figure-caption om basisstijlen te geven aan de HTML5-elementen <figure> en <figcaption>. Afbeeldingen in figures hebben geen expliciete afmeting, dus voeg de klasse .img-fluid aan je <img> toe om hem responsief te maken.

HTML

<figure class="figure">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22400x300%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2250%22%3E400x300%3C%2Ftext%3E%3C%2Fsvg%3E" width="400" height="300" class="figure-img img-fluid rounded" alt="400x300">
  <figcaption class="figure-caption">Een bijschrift bij bovenstaande afbeelding.</figcaption>
</figure>

Het bijschrift van de figure uitlijnen is eenvoudig met onze tekst-utilities.

HTML

<figure class="figure">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22400x300%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2250%22%3E400x300%3C%2Ftext%3E%3C%2Fsvg%3E" width="400" height="300" class="figure-img img-fluid rounded" alt="400x300">
  <figcaption class="figure-caption text-end">Een bijschrift bij bovenstaande afbeelding.</figcaption>
</figure>

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.