Image sizes

Use the .max-w-{size} helper classes to customize the size of the image.

image image image

Rounded images

For rounded images use the .img-rounded class.

image image image

Circular images

For circular images use the .img-circle class.

image image image

Thumbnail images

For thumbnail images use the .img-thumbnail class.

image image image

Zooming animations

Apply the .zoom-in-1, .zoom-in-2, .zoom-out-1 or the .zoom-out-2 classes for zooming image animations.

image
image
image
image

Sliding animations

Apply the .slide-left, .slide-right, .slide-up or the .slide-down classes for sliding image animations.

image
image
image
image

Rotating animations

Apply the .rotate-{1-4} classes for rotating image animations.

image
image
image
image

Opacity animations

Apply the .opacity-1 or the .opacity-2 classes and combine it with any of the bg-{color} helper classes for opacity image animations.

image
image
image
image
image
image
image
image

Other effects

Additional effects that work only on the latest standards compliant browsers.

image
image
image
image