<figure> element to display self-contained content, like illustrations, images, photos or code. For image-specific styles, refer to the Images page.
<figcaption> element to display a caption for a given
Use text align utilities to align the caption relative to the image.
Images often play an important role in content, providing useful information and helping to illustrate points. Images can be displayed within
<figure> elements and given an optional caption using the
Using a few simple class names, you can change the alignment of your images and even have them extend slightly beyond the content area for added effect.
.float-left to have an image float to the left of the content. Responsive variants allow you to control the float based on screen size.
There should be some space above, below and on the appropriate side of the image to ensure separation between the image and surrounding text. This will make the page look better and improve readability.
Margin utilities allow you to apply spacing around the image and reposition the element on larger screen sizes. Text alignment utilities can be used to control the alignment of the caption.
The left-aligned example uses
.lg:mr-6 to apply margin around the entire element and
lg:-ml-6 to shift the image further to the left on large screen sizes.
.float-right to achieve a similar (but opposite) effect. Consider using other utilities, for example borders and background colors, to add further interest to your images or apply your own styles to figures or images within the content area (
.content) using custom CSS.
When floating elements it may occasionally be necessary to use
.clearfix to ensure content remains within the content area.