Luncat ka eusi utama Luncat ka navigasi docs
Check

Dokuméntasi sareng conto pikeun ningalikeun gambar sareng téks anu aya hubunganana sareng komponén tokoh dina Bootstrap.

Dina kaca ieu

Iraha waé anjeun kedah nampilkeun sapotong eusi-sapertos gambar kalayan caption opsional, pertimbangkeun nganggo <figure>.

Paké kaasup .figure, .figure-imgsarta .figure-captionkelas nyadiakeun sababaraha gaya dasar pikeun HTML5 <figure>jeung <figcaption>elemen. Gambar dina inohong teu boga ukuran eksplisit, jadi pastikeun pikeun nambahkeun .img-fluidkelas ka anjeun <img>sangkan responsif.

Placeholder 400x300
Caption pikeun gambar di luhur.
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>

aligning caption inohong urang gampang jeung utilitas téks urang .

Placeholder 400x300
Caption pikeun gambar di luhur.
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

Variabel

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