Why Figure component in Bootsrap? - Purpose & Use Cases

The Big Idea

Discover how a simple wrapper can make your images and captions look perfect everywhere!

The Scenario

Imagine you want to show a photo with a caption below it on your webpage. You write an <img> tag and then add a separate <p> tag for the caption.

The Problem

If you want to style the image and caption together or keep them aligned nicely, you have to write extra CSS and HTML. It's easy to make mistakes, and the caption might not stay close to the image on different screen sizes.

The Solution

The Bootstrap Figure component groups the image and caption in a simple, clean way. It automatically styles and aligns them so they look good on all devices without extra work.

Before vs After

✗ Before

<img src="photo.jpg" alt="A mountain">
<p>Beautiful mountain view</p>

✓ After

<figure class="figure">
  <img src="photo.jpg" class="figure-img img-fluid rounded" alt="A mountain">
  <figcaption class="figure-caption">Beautiful mountain view</figcaption>
</figure>

What It Enables

You can easily add images with captions that look polished and stay well aligned on any screen size.

Real Life Example

On a travel blog, you want to show photos with descriptions under each picture. Using the Figure component keeps your posts neat and readable on phones and computers.

Key Takeaways

Manually pairing images and captions is tricky and needs extra styling.

The Figure component groups and styles them automatically.

This saves time and ensures consistent, responsive layouts.