Figurky

Dokumentace a příklady pro zobrazení souvisejících obrázků a textu s komponentou obrázek v Bootstrapu.

Kdykoli potřebujete zobrazit obsah – například obrázek s volitelným popiskem, zvažte použití souboru <figure>.

Použijte přiložené .figuretřídy .figure-imga .figure-captionk poskytnutí některých základních stylů pro HTML5 <figure>a <figcaption>prvky. Obrázky v obrázcích nemají žádnou explicitní velikost, takže nezapomeňte přidat .img-fluidtřídu, <img>aby byla responzivní.

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

Zarovnání popisku obrázku je snadné s našimi textovými nástroji .

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