You Are Here

Bootstrap 4 Figures

The Bootstrap figure element is used when one needs to display a piece of content, generally images with an optional caption. The figure class in Bootstrap 4 is used to add styling to the default figure elements.
Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.

Using the .figure class:

The base .figure class is used to indicate a figure element and .figure-img is used to indicate the image used in the figure element.

Example:

<figure class="figure">
<img class="figure-img" src="Sample.jpg" alt="figure - sample">
</figure>
Try it

Using the .figure-caption class:

The .figure-caption class may be used to display a caption below the figure.

Example:

<figure class="figure">
<img class="figure-img" src="Sample.jpg" alt="figure - sample">
<figcaption class="figure-caption">
This is a sample image.
</figcaption>
</figure>
Try it

Text Utilities:

Aligning the figure caption at the right side or left side by using the text utility classes. These classes placed within the <figcaption> tag.
The below example shows the placing of figure caption on the right side by using a text-right class.

Example:

<figure class="figure">
<img class="figure-img" src="Sample.jpg" alt="figure - sample">
<figcaption class="figure-caption text-right">
This is a sample image.
</figcaption>
</figure>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *