Bootstrap 5 Figures

Last Updated : 16 Dec, 2022

A Bootstrap5 Figures is a component that provides a way to display a piece of content along with an image. If we want to show the image with an optional component, the figure class in Bootstrap 5 is used.

Bootstrap 5 Figures Classes:

figure: used to display content, like any image with an optional caption.
figure-caption: used to give styles to the caption figure.
img-fluid: used to make an image responsive.

Syntax:

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" 
         alt="...">
  <figcaption class="figure-caption">...</figcaption>
</figure>

Example 1: In this example, we are going to see how to display images and text with the figure component in Bootstrap with a caption at the left bottom of the image.

HTML

<!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">
 
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
 
<body>
    <div class="container pt-4">
        <div >
            <h3 class="text-success">
                GeekforGeeks
            </h3>
            <h5>Bootstrap 5 Figures</h5>
        </div>
 
        <div class="middle">
            <figure class="figure">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                    class="figure-img img-fluid"
                    alt="Image failed to load">
                <figcaption class="figure-caption">
                    Image Caption
                </figcaption>
            </figure>
        </div>
    </div>
</body>
</html>

Output:

Example2:In this example, we are going to see how to display images and text with the figure component in Bootstrap with a caption at the right bottom of the image.

HTML

<!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">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
 
<body>
    <div class="container pt-4 ">
        <div class="header">
            <h3 class="text-success">
                GeekforGeeks
            </h3>
            <h5>Bootstrap 5 Figures</h5>
        </div>
        <div class="middle">
            <figure class="figure">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                    class="figure-img img-fluid " alt="Image failed to load">
                <figcaption class="figure-caption text-end">
                    Image Caption
                </figcaption>
            </figure>
        </div>
    </div>
</body>
</html>