Image

Opt your images into responsive behavior and add lightweight styles to them, all via classes.

Responsive images

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

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

Image shapes

Easily create images in different shapes with adding one class to the <img> tag.

<img src="..." class="rounded" alt="Round image">
<img src="..." class="rounded-circle" alt="Circle image">
<img src="..." class="img-thumbnail" alt="Thumbnail">

Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.

<figure class="figure img-thumbnail bg-lighter">
  <img src="..." class="figure-img img-fluid" alt="Image">
  <figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
</figure>