Figures: Captions for media content

A figure in Bootstrap is just a simple box which displays an image (or video) with a descriptive text caption the Caption.

You could just place them next to each other, but using the Bootstrap figure classes makes it so that they are perfectly spaced and they are associated for the screen readers.

The Basic Structure

To create a figure, you use three specific Bootstrap classes:

.figure: The container for the whole block.
.figure-img: Added to the <img> tag to give it nice spacing and make it responsive.
.figure-caption: Added to the <figcaption> tag to style the text.

Example Code

HTML

<figure class="figure">
  <img src="mountain.jpg" class="figure-img img-fluid rounded" alt="A snowy mountain peak.">
  <figcaption class="figure-caption">A beautiful sunset over the Swiss Alps.</figcaption>
</figure>

Why Use These Classes?

1. Spacing and Layout

Bootstrap does a lot of little things to make this existing image look as professional as possible. Firstly, it adds a certain amount of bottom margin to the image so that caption isn‘t “choking” it. It also makes the caption text a little lighter and smaller so you‘ll looks professional and definitely be easily differentiated from your body text.

2. Responsiveness

Adding. img-fluid to the image within the figure will make its width automatically resize to the width of the parent element(column or div).

3. Text Alignment

Captions are aligned to the left by default, but they can be moved around just as easily with the default text utilities offered by Bootstrap:

Center: <figcaption class="figure-caption text-center">
Right: <figcaption class="figure-caption text-end">

Summary Table

Class	Purpose	What it does
`.figure`	The Outer Box	Wraps the image and caption together.
`.figure-img`	The Image	Handles margins and alignment for the picture.
`.figure-caption`	The Text	Styles the caption (smaller, muted color).
`.img-fluid`	The Scale	Makes sure the image doesn’t overflow the screen.

Pro-Tip: Adding Borders

Want your image to resemble a Polaroid or picture inside of a frame? Simply add the .img-thumbnail class to your element. This will give your image a light border of 1px with some padding around it

Note: Always remember to include the alt attribute in your <img> tag for accessibility. While the caption explains the photo to sighted users, the alt text explains it to search engines and visually impaired users.