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.
<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
<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>