0
0
Bootsrapmarkup~5 mins

Figure component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The Figure component helps you show images with captions in a neat and easy way.

When you want to add a photo with a description below it.
When you need to display a quote or illustration with a caption.
When you want your images and captions to look good on all screen sizes.
When you want to keep your page organized with consistent image styling.
Syntax
Bootsrap
<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="Description">
  <figcaption class="figure-caption">Caption text here.</figcaption>
</figure>

The <figure> tag groups the image and caption together.

Use figure-img class for the image and figure-caption for the caption.

Examples
This shows a flower image with a caption below it.
Bootsrap
<figure class="figure">
  <img src="flower.jpg" class="figure-img img-fluid rounded" alt="A red flower">
  <figcaption class="figure-caption">A beautiful red flower.</figcaption>
</figure>
This example aligns the caption to the right using text-end.
Bootsrap
<figure class="figure">
  <img src="quote.png" class="figure-img img-fluid" alt="Quote image">
  <figcaption class="figure-caption text-end">A famous quote.</figcaption>
</figure>
Sample Program

This page shows the Bootstrap logo with a caption below it using the Figure component. The image is responsive and has rounded corners.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Figure Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-5">
    <h1>Figure Component Demo</h1>
    <figure class="figure">
      <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" class="figure-img img-fluid rounded" alt="Bootstrap Logo">
      <figcaption class="figure-caption">This is the Bootstrap logo.</figcaption>
    </figure>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always add an alt attribute to images for accessibility.

The img-fluid class makes images scale nicely on different screen sizes.

You can align captions using Bootstrap text alignment classes like text-center or text-end.

Summary

The Figure component groups images and captions together.

Use Bootstrap classes figure-img and figure-caption for styling.

It helps make images responsive and captions clear on all devices.