Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

On this page:

Responsive images

Images in Bootstrap are made responsive with .c-img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

PlaceholderResponsive image
<img src="..." class="c-img-fluid" alt="Responsive image">

Image thumbnails

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

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200
<img src="..." alt="..." class="c-img-thumbnail">

Aligning images

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .c-mx-auto margin utility class.

Placeholder200x200 Placeholder200x200
<img src="..." class="c-rounded c-float-left" alt="...">
<img src="..." class="c-rounded c-float-right" alt="...">
<img src="..." class="c-rounded c-mx-auto c-d-block" alt="...">
<div class="c-text-center">
  <img src="..." class="c-rounded" alt="...">


If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

  <source srcset="..." type="image/svg+xml">
  <img src="..." class="c-img-fluid c-img-thumbnail" alt="...">