Images

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.

Responsive images

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

Generic responsive image 
<img data-src=".../100px250" class="img-fluid" alt="Generic responsive image">

SVG images and IE 10

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

Image thumbnails

In addition to border-radius utilities, you can use .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 camera 
<div class="bd-example bd-example-images">
  <img data-src=".../200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
</div>

Examples

Image Rounded image
Circle Image Circle image
Raised Raised image
Circle Raised Raised circle image
Avatar group
Image placeholder Image placeholder Image placeholder Image placeholder
Sizing Image placeholder Image placeholder Image placeholder Image placeholder Image placeholder 
<div class="row">
  <div class="col-sm-3 col-6">
    <small class="d-block text-uppercase font-weight-bold mb-4">Image</small>
    <img src="../../../assets/img/faces/team-1.jpg" alt="Rounded image" class="img-fluid rounded shadow" style="width: 150px;">
  </div>
  <div class="col-sm-3 col-6">
    <small class="d-block text-uppercase font-weight-bold mb-4">Circle Image</small>
    <img src="../../../assets/img/faces/team-2.jpg" alt="Circle image" class="img-fluid rounded-circle shadow" style="width: 150px;">
  </div>
  <div class="col-sm-3 col-6 mt-5 mt-sm-0">
    <small class="d-block text-uppercase font-weight-bold mb-4">Raised</small>
    <img src="../../../assets/img/faces/team-3.jpg" alt="Raised image" class="img-fluid rounded shadow-lg" style="width: 150px;">
  </div>
  <div class="col-sm-3 col-6 mt-5 mt-sm-0">
    <small class="d-block text-uppercase font-weight-bold mb-4">Circle Raised</small>
    <img src="../../../assets/img/faces/team-4.jpg" alt="Raised circle image" class="img-fluid rounded-circle shadow-lg" style="width: 150px;">
  </div>
</div>
<div class="row mt-5">
  <div class="col-sm-3 col-6">
    <small class="d-block text-uppercase font-weight-bold mb-4">Avatar group</small>
    <div class="avatar-group">
      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
        <img alt="Image placeholder" src="../../../assets/img/faces/team-1.jpg">
      </a>
      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
        <img alt="Image placeholder" src="../../../assets/img/faces/team-2.jpg">
      </a>
      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
        <img alt="Image placeholder" src="../../../assets/img/faces/team-3.jpg">
      </a>
      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
        <img alt="Image placeholder" src="../../../assets/img//faces/team-4.jpg">
      </a>
    </div>
  </div>
  <div class="col-sm-6 col-6">
    <small class="d-block text-uppercase font-weight-bold mb-4">Sizing</small>
    <a href="javascript:;" class="avatar avatar-xs rounded-circle">
      <img alt="Image placeholder" src="../../../assets/img/faces/team-4.jpg">
    </a>
    <a href="javascript:;" class="avatar avatar-sm rounded-circle">
        <img alt="Image placeholder" src="../../../assets/img/faces/team-4.jpg">
    </a>
    <a href="javascript:;" class="avatar rounded-circle">
        <img alt="Image placeholder" src="../../../assets/img/faces/team-4.jpg">
    </a>
    <a href="javascript:;" class="avatar avatar-lg rounded-circle">
        <img alt="Image placeholder" src="../../../assets/img/faces/team-4.jpg">
    </a>
    <a href="javascript:;" class="avatar avatar-xl rounded-circle">
        <img alt="Image placeholder" src="../../../assets/img/faces/team-4.jpg">
    </a>
  </div>
</div>

Aligning images

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

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners 
<div class="bd-example bd-example-images">
  <img data-src=".../200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
  <img data-src=".../200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners">
</div>
A generic square placeholder image with rounded corners 
<div class="bd-example bd-example-images">
  <img data-src=".../200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
</div>

Picture

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.

Rounded image 
  <picture>
<img src="../../../assets/img/faces/team-5.jpg" alt="Rounded image" class="img-fluid rounded shadow" style="width: 150px;">
  </picture>