Images

Image Shapes

Change the shape of an image using .rounded or .circle modifier classes. In addition use .img-thumbnail to give an image 1px border appearance.

img
img
img
img
Aligning images

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

img img
Align Center

Block-level images can be centered using the .mx-auto margin utility class.

img
Cropperjs

An advanced JavaScript image cropper.

Picture
px
px
px
px
deg
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 image with rounded corners in a figure.
Left Aligned Caption
A generic square placeholder image with rounded corners in a figure.
Right Aligned Caption