How to: Bootstrap image responsive

How to make image responsive in Bootstrap - code helpers

Add class .img-fluid to make your bootstrap image responsive. It will apply max-width: 100%; and height: auto; to the image, which makes it always fit the parent element.

HTML

<img src="https://mdbootstrap.com/img/new/slides/041.webp" class="img-fluid" alt="..." />

Examples

The dark border of each picture shows the size of his parent element.

Detailed documentation and more examples about Bootstrap image slider you can find in our Bootstrap Images Docs

HTML

<div class="row mb-4">
  <div class="col-md-4 p-2 bg-dark">
    <img src="https://mdbootstrap.com/img/Others/documentation/1.webp" class="img-fluid"
      alt="Responsive image">
  </div>
</div>

<div class="row mb-4">
  <div class="col-md-6 p-2 bg-dark">
    <img src="https://mdbootstrap.com/img/Others/documentation/2.webp" class="img-fluid"
      alt="Responsive image">
  </div>
</div>

<div class="row">
  <div class="col-md-8 p-2 bg-dark">
    <img src="https://mdbootstrap.com/img/Others/documentation/3.webp" class="img-fluid"
      alt="Responsive image">
  </div>
</div>