Figures

Whenever there is a need to display content, such as an image with an optional commentary, think about utilising a <figure>.

To give some default styles for the HTML5 <figure> and <figcaption> elements, use the included .figure, .figure-img, and .figure-caption classes. Be careful to include the .img-fluid class to the <img> to make it responsive since images in figures do not have a specific size.

<figure class="figure">
  <img src="https://ux4g.dl6.in/assets/img/chose/needux4g.svg" class="figure-img img-fluid rounded" alt="..."/>
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Result

Aligning the figure's caption is easy with our text utilities.

<figure class="figure">
  <img src="https://ux4g.dl6.in/assets/img/chose/needux4g.svg" class="figure-img img-fluid rounded" alt="..."/>
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Result

Previous « Contents

Next Images »

Figures

Result

Result

Accessibility options by UX4G