Geek Answers Handbook

Bootstrap: img-responsive vs img-fluid

I am using bootloader 3.3.6 and I am using IMG-responsive class for responsiveness of the image.

I found a new class name img-Fluid, but it is not in version 3.3.6.

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

img-responseive simply resizes the image to fit the size of the parent container we can get using the css property width: 100% and height: auto. Then why use an imag-responsive class?

+10
twitter bootstrap
source share
1 answer

img-responsive was in Bootstrap 3, img-fluid has been in Bootstrap 4 since the beta.

Removes display: unit; from .img fluid. The adaptive behavior of the image is not dependent on display: block ;, so we can safely remove it from our side. If you need a block level, you can easily override it in the source code or using the utility class.

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

More articles:


All Articles