John Mwaniki /   21 Oct 2022

[Solved]: Bootstrap img-fluid not working

As a web developer using the Bootstrap framework to build your website, you may be using .img-fluid class to make your images responsive but it doesn't seem to work for you. If this is happening to you, then this article is for you.

What are responsive images?

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.

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. The height is set to scale automatically in proportion to the image width.

If the image is not set to be responsive, then its width and height remain constant across all the devices. 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. This will result in scrolling from left to right in order to view the whole image, lowering the user experience of the website.

It's a common practice since the inception of Responsive Web Design (RWD) to have image size respond to the device screen size.

Bootstrap, being a mobile-first front-end development framework provides an easy way to make images responsive.

What is bootstrap .img-fluid?

img-fluid is a bootstrap class used to make the images responsive.

It was introduced in bootstrap 4 to replace .img-responsive class which has been deprecated since then for bootstrap 4 and later versions.

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 src="path/to/file/image.jpg" class="img-fluid">

Why bootstrap .img-fluid may not work and how to fix it

Despite adding the class img-fluid, you may still find your website images not being responsive.

The most common cause for this to happen is bootstrap versions conflict. 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).

Using it on earlier versions, such as version 3 will not work.

The first check you should do is which bootstrap version you are using on your website. This will help you use classes that are compatible with the version. Here is a tutorial I had written on how to check which bootstrap version your website is using.

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.

<img src="path/to/file/image.jpg" class="img-responsive">

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.

You should also make sure that bootstrap is properly installed on your website. You can simply do this by viewing whether the bootstrap CSS and JS files are properly loaded via the web page source. Just right-click on the page, then select view page source. In the source code, click on the link with the name bootstrap.css, bootstrap.min.css, and check if it opens well without showing a 404 error. Also, click on a link with the name bootstrap.js or bootstrap.min.js at the bottom of the page source code and see if it loads well or results in a 404 error.

In case you don't find a file with bootstrap in its name, or opening it results in a 404 error, then bootstrap is not installed on your website and you need to first install it prior to using the img-fluid class in images.

Another method to fix it is to use CSS to style it as below. All you have to do is set the image width to 100% and height as "auto".

<img src="path/to/file/image.jpg" style="width: 100%; height: auto;">

You can also use the HTML width and height attributes within the image tag as shown below. Set the width to 100% and height to "auto".

<img src="path/to/file/image.jpg" width = "100%" height = "auto">

Alternatively, you can replace the img-fluid class value with col-12 within the image tags. It makes the images always cover 100% width of the parent element.

<img src="path/to/file/image.jpg" class="col-12">

Note: If setting the width and height using CSS does not work, try adding !important after the height and width property values. It will force overwriting any formerly set CSS rules for the image width and height.

.myimage {
  width: 100% !important;
  height: auto !important;
}

That's it.

By using any of the above methods, you will be able to fix the issue and make your images on the website responsive.