You can as well leave the class as it is and update the bootstrap version of the website to bootstrap 4 or later and that will fix it. If your website happens to be built in version 3 or lower, you should replace the img-fluid class with img-responsive as in the example below. Here is a tutorial I had written on how to check which bootstrap version your website is using. ![]() This will help you use classes that are compatible with the version. The first check you should do is which bootstrap version you are using on your website. Using it on earlier versions, such as version 3 will not work. As I had mentioned earlier above, the class img-fluid was introduced in Bootstrap version 4 and was as well adopted in version 5 (which is the latest version at the time of writing this article). The most common cause for this to happen is bootstrap versions conflict. img-fluid may not work and how to fix itĭespite adding the class img-fluid, you may still find your website images not being responsive. To make the images in bootstrap 4 and later versions responsive, just add the class attribute with the value " img-fluid" within the image tag as shown below. img-responsive class which has been deprecated since then for bootstrap 4 and later versions. It was introduced in bootstrap 4 to replace. Img-fluid is a bootstrap class used to make the images responsive. It's a common practice since the inception of Responsive Web Design (RWD) to have image size respond to the device screen size.īootstrap, being a mobile-first front-end development framework provides an easy way to make images responsive. This will result in scrolling from left to right in order to view the whole image, lowering the user experience of the website. This poses a challenge because when the website is viewed on smaller devices such as smartphones and tablets, the non-responsive images may exceed the device's screen width. ![]() ![]() If the image is not set to be responsive, then its width and height remain constant across all the devices. The height is set to scale automatically in proportion to the image width. Responsive images are styled to occupy their full size if they are smaller in width than the parent element, or scaled down to cover 100% width of the parent element. Responsive images are images on a website that are set to re-adjust their width and height depending on the screen size of the device used to view the website. If this is happening to you, then this article is for you. img-fluid class to make your images responsive but it doesn't seem to work for you. John Mwaniki / : Bootstrap img-fluid not workingĪs a web developer using the Bootstrap framework to build your website, you may be using.
0 Comments
Leave a Reply. |