--- layout: docs title: Figures group: content --- Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `
`. Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `
` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive. {% example html %}
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
{% endexample %} Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment). {% example html %}
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
{% endexample %}