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 
<svg class="img-fluid" width="100%" height="180" viewBox="0 0 800 180" preserveAspectRatio="xMidYMid slice"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="rgba(91,46,242,.12)" /><text x="400" y="100" text-anchor="middle"
    fill="rgba(91,46,242,.6)" font-family="sans-serif" font-size="24">Responsive image</text>
</svg>

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 
<img class="img-thumbnail" width="200" height="200"
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23ece6fd'/%3E%3C/svg%3E"
  alt="Thumbnail example">

Rounded images

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

<img class="img-rounded" width="120" height="120"
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%237753fa'/%3E%3C/svg%3E"
  alt="">
<img class="img-circle" width="120" height="120"
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23ff3d81'/%3E%3C/svg%3E"
  alt="">

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.