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.

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;
}