Figures in Bootstrap 5.3 - Enhancing Image and Media Presentation

Figures & Figcaption

In Bootstrap 5.3, figures are a component used to enhance the presentation of images and media content. The <figure> element, along with the <figcaption> element, is used to wrap and caption the image or media. Here's an explanation of how to use figures in Bootstrap 5.3

Structure the figure: Start by creating a <figure> element and placing the image or media content inside it.

<figure class="figure">
    <img src="images/07.jpg" alt="flower" class="img-fluid rounded figure-img" />
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

<figure class="figure">: This <figure> element represents the container for the image and its caption. The "figure" class is applied to add default Bootstrap styling to the figure.

<figcaption class="figure-caption"> A caption for the above image. </figcaption> : This <figcaption> element represents the caption for the image. The "figure-caption" class is applied to style the caption text.

figure-caption class

The figure-caption class in Bootstrap is used to style the caption text within a figure element. It provides a predefined set of styles to make the caption visually appealing and distinguishable from the rest of the content. Here are some key points about the figure-caption class

Typography: The figure-caption class sets the font properties for the caption text, such as font size, weight, and line height, to ensure readability.
Positioning: By default, the caption is positioned below the image within the figure. The figure-caption class applies margin and padding to create appropriate spacing around the caption.
Background color: The figure-caption class does not define a background color, allowing it to inherit the background color of the parent figure element or the surrounding container.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Figure in Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/base.css" />
  </head>
  <body>
    <div class="container mt-4">
      <h5 class="text-primary mb-3">Bootstrap Figure With Caption</h5>
      <div class="row">
        <div class="col-6">
          <figure class="figure">
            <img src="images/07.jpg" alt="flower" class="img-fluid rounded figure-img" />
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
          </figure>
        </div>
        <div class="col-6">
          <figure class="figure">
            <img src="images/09.jpg" alt="flower" class="img-fluid rounded figure-img" />
            <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
          </figure>
        </div>
        <div class="col-6">
          <figure class="figure">
            <img src="images/10.jpg" alt="flower" class="img-fluid rounded figure-img" />
            <figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview