Figuren

Dokumentatioun an Beispiller fir Zesummenhang Biller an Text mat der Figur Komponent am Bootstrap ze weisen.

Op dëser Säit

All Kéier wann Dir e Stéck Inhalt muss weisen - wéi e Bild mat enger optionaler Iwwerschrëft, betruecht eng <figure>.

Benotzt déi abegraff .figure, .figure-imga .figure-captionKlassen fir e puer Baseline Stiler fir HTML5 <figure>an <figcaption>Elementer ze bidden. Biller a Figuren hu keng explizit Gréisst, also gitt sécher d' .img-fluidKlass op Är <img>ze addéieren fir se reaktiounsfäeger ze maachen.

En Iwwerschrëft fir dat uewe Bild.

html

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

D'Iwwerschrëft vun der Figur ausriichten ass einfach mat eisen Text Utilities .

En Iwwerschrëft fir dat uewe Bild.

html

<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

Variablen

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