Bootstrap: img-responsive vs img-fluid

Question

I am using bootstrap 3.3.6 and I am using class img-responsive for image responsiveness.

I have found a new class name img-fluid, but it's not present in 3.3.6 version.

Can anyone tell what is the difference between img-responsive and img-fluid?

img-responsive just resizes the image as per parent container size which we can achive it using css property width: 100% and height: auto. Then why to use image-responsive class?

Answer 1

img-responsive was in Bootstrap 3, img-fluid is in Bootstrap 4 since beta version.

Removes display: block; from .img-fluid. Responsive image behavior is not dependent on display: block;, so we can safely remove it on our end. Should you need block level, you can easily override that in the source or with a utility class.

.img-fluid {
  max-width: 100%;
  height: auto;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}