Skip to main content

Images

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

Responsive images

Images in boodoo are made responsive with .img-fluid. This applies max-width: 100% and height: auto so that the image scales with the parent width.

Responsive image

Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

Thumbnail example

Rounded images

Use .img-rounded or .img-circle for slight or full rounding:

Modern effects

boodoo's images also include progressive-enhancement helpers:

  • .img-blur-up — apply a blur that you clear with JS once the image loads (blur-up loading pattern).
  • .img-loading — a shimmering placeholder background while content loads.
  • .object-cover / .object-contain — control how images fit their box using object-fit.
  • .aspect-square / .aspect-video — pair with .ratio for responsive media boxes.

SVG icons

All boodoo SVG icons and custom SVG scale to the text size with the bi class used inside icon links.