Bootstrap - Figures

This chapter discusses about the figure component of Bootstrap. Consider utilizing the <figure> element whenever you have a need to exhibit content, such as an image that may be accompanied by an optional caption.

  • <figure> element is used to markup a photo or an image in a document and <figcaption> is used to define a caption to that photo.

  • The .figure class is used to create a responsive container for images, videos, or other media objects.

  • It provides a way to wrap media content along with optional captions and other related elements.

  • The classes .figure, .figure-img and .figure-caption provide baseline styles for the <figure> and <figcaption>.

  • Use .img-fluid class to your <img>, in order to make it responsive; as the images in figures have no explicit size.

Let us see an example of .figure class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</title>
        <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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Figures</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption">A caption for the responsive image.</figcaption>
        </figure>
    </body>
</html>

The alignment of the caption can be changed using the text utilities, such as .text-start, .text-center or .text-end.

Let us see an example for changing the alignment of caption:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</title>
        <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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Figure caption alignment</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/tutimg.png" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption text-center">Responsive image</figcaption>
        </figure>
    </body>
</html>
Advertisements