Bootstrap Figures

• Bootstrap provides built-in classes to style images and videos as figures.
• A figure is a container that holds an image, video, or other media, along with a caption.

Syntax

Here is the syntax to create a figure in Bootstrap:

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

Explanation

In the code above, we used the following classes to create the figure:

• figure: this is the main class that indicates that this is a figure container.
• figure-img: this is a class that is applied to the img tag to make it behave like a figure image.
• img-fluid: this is a class that makes the image fluid and responsive.
• rounded: this is a class that adds rounded corners to the image.
• figure-caption: this is a class that is applied to the figcaption tag to make it behave like a figure caption.

Use

Bootstrap figures are useful for displaying images and videos with a caption. They are commonly used in blogs, galleries, and portfolios.

Important Points

• Bootstrap provides classes to create figures with images, videos, or other media.
• Figures can be used to display media along with a caption.
• Bootstrap figures are responsive and can be customized with different styles.

Summary

Bootstrap provides an easy way to create figures with images and captions. By using Bootstrap figures, you can display media in an organized and visually appealing way.