Bootstrap Figures

Written by RedoHub Team · Last updated: August 1, 2026

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.

A generic square placeholder image. — A caption for the above image explaining what is happening.

<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.

A right aligned placeholder — Photograph taken by John Doe.

<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.

A circular placeholder — Team Member Profile

<!-- 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>

Common Mistakes to Avoid

Using a <div> instead of <figure> for image+caption pairs. <figure> and <figcaption> are semantic HTML5 elements that convey meaning to screen readers and search engines — a generic <div> doesn't communicate that relationship at all.

Forgetting .img-fluid on the image inside a figure. Without it, a large image can overflow its container on narrow screens even though the figure itself has responsive classes.

Writing decorative alt text like "image" or leaving it empty on meaningful photos. Alt text should describe what the image shows — empty or vague alt text hurts both accessibility and image SEO.

Try It: A Figure with a Bordered Card Look

A second example — pairing a figure with card-like padding and a border for a more polished presentation:

<figure class="figure p-3 border rounded">
    <img src="chart.png" class="figure-img img-fluid rounded" alt="Bar chart showing quarterly sales growth">
    <figcaption class="figure-caption text-center">Fig. 1 — Quarterly sales growth, 2025</figcaption>
</figure>

Frequently Asked Questions

Q: Is figure-caption required inside a figure?

A: No — <figure> can stand alone. Use <figcaption> whenever you have descriptive text to attach to the image.

Q: Can a figure contain more than one image?

A: Yes — the HTML5 spec allows multiple images or other embedded content inside one <figure>, sharing a single caption.

Q: Do figures help with SEO?

A: Indirectly — the semantic structure and caption text give search engines more context about the image than a bare <img> tag would. See the official Bootstrap Figures documentation for more styling options.

« Previous Lesson Next Lesson »