Figures
Bootstrap figures are commonly used elements for displaying images with the caption. A caption can be left-aligned or right-align.
Use the included .figure
, .figure-img
and .figure-caption
classes to provide some baseline styles for the HTML5 <figure>
and <figcaption>
elements. Images in figures
have no explicit size, so be sure to add the .img-fluid
class to your <img>
to make it responsive
<figure class="figure">
<img data-src="..." class="figure-img img-fluid" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
Aligning the figure’s caption is easy with our text utilities.
<figure class="figure">
<img data-src="..." class="figure-img img-fluid" alt="...">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>