Figures

Use the HTML <figure> element with Bootstrap's .figure, .figure-img, and .figure-caption classes for displaying images with optional captions.

Basic Figure

Wrap an image in <figure> with class .figure. Add .figure-img to the image and .figure-caption to the caption.

Show Code

<figure class="figure">
  <img src="photo.jpg" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">Caption text here.</figcaption>
</figure>

Caption Alignment

Use text alignment utilities on .figure-caption to position the caption.

Show Code

<!-- Left caption -->
<figure class="figure">
  <img src="photo.jpg" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-start">Left aligned caption</figcaption>
</figure>

<!-- Centered caption -->
<figure class="figure">
  <img src="photo.jpg" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-center">Centered caption</figcaption>
</figure>

<!-- Right caption -->
<figure class="figure">
  <img src="photo.jpg" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">Right aligned caption</figcaption>
</figure>

Figure inside a Card

Common use case — embedding a figure inside a card for article or gallery layouts.

Artikel Kampus

Berikut dokumentasi kegiatan akademik terbaru di lingkungan ITATS Surabaya.

Show Code

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Article Title</h5>
    <p class="card-text">Article description...</p>
    <figure class="figure mb-0">
      <img src="photo.jpg" class="figure-img img-fluid rounded w-100" alt="...">
      <figcaption class="figure-caption text-center">
        Photo caption here.
      </figcaption>
    </figure>
  </div>
</div>