Explore Templates

Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

Image Shapes

Use the rounded, roundedCircle and thumbnail props to customise the image and use the fluid to scale image nicely to the parent element.

Aligning images

Align images with the helper float classes or text alignment classes.

imgimg
Align Center
img
Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a Figure. Aligning the Figure’s caption is easy with text utilities.

A generic square placeholder img with rounded corners in a figure.
Left Aligned Caption
A generic square placeholder img with rounded corners in a figure.
Right Aligned Caption