Bootstrap Figures

Whenever you need to display an image alongside a piece of descriptive text (a caption), you should use the semantic HTML5 <figure> element.

Bootstrap 5 provides three specific classes—.figure, .figure-img, and .figure-caption—to instantly style this relationship so the caption text aligns perfectly with the photograph.

1. Basic Figure Construction

To use figures correctly, you need three pieces of code:

• The <figure class="figure"> container.
• The image itself with the .figure-img and .img-fluid classes.
• The text inside a <figcaption class="figure-caption"> tag.

<figure class="figure">
    <!-- Apply .img-fluid to ensure the image acts responsively! -->
    <img src="vacation.jpg" class="figure-img img-fluid rounded" alt="Vacation Photo">
    
    <figcaption class="figure-caption">
        A breathtaking view of the mountains we hiked on Tuesday.
    </figcaption>
</figure>

2. Aligning Figure Captions

By default, .figure-caption text is physically aligned to the left of the image. You can reposition this caption easily by applying standard Bootstrap text utilities.

Right Aligned Caption

Add .text-end directly to the <figcaption> element to push the caption perfectly underneath the right-edge of the photograph.

<figure class="figure">
    <img src="..." class="figure-img img-fluid rounded" alt="...">
    <!-- .text-end pushes text to the right -->
    <figcaption class="figure-caption text-end">Photograph taken by John Doe.</figcaption>
</figure>

Center Aligned Caption

Add .text-center to evenly center the caption below the image. This works exceptionally well in art galleries and tight column layouts.

<!-- Sometimes center alignment is best applied to the whole figure block -->
<figure class="figure text-center">
    <img src="..." class="figure-img img-fluid rounded-circle" alt="...">
    <!-- Centered caption text -->
    <figcaption class="figure-caption mt-2">Team Member Profile</figcaption>
</figure>