Bootstrap 5 Figures

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>

Output:

Reference:https://getbootstrap.com/docs/5.0/content/figures/

Explore