![[Fixed]: Bootstrap .img-responsive not working](https://www.webdevsplanet.com/assets/images/gallery/bootstrap-img-responsive-not-working.webp)
[Fixed]: Bootstrap .img-responsive not working
Are you a website developer and a bootstrap framework user trying to make your images responsive to screen size but it doesn't seem to work?
You are using .img-responsive class in your images... Right?
First, before diving in, let's first define responsive web design and responsive images in case you are new to these terms.
Responsive Web Design (RWD) is a web design approach that makes pages render well across multiple devices screen sizes and/or window sizes from minimum to maximum size.
This means that regardless of the device you are using (be it a large desktop computer, laptop, tablet, or smartphone), the website will fit well and look appealing and well organized.
Page elements may have to realign and resize themselves depending on the size of the screen of the device you are using to access the site.
Same as responsive web design, and as part of it, responsive images work well on devices with widely differing screen sizes and resolutions.
Responsive images readjust their width and height to fit well in the device screen.
Bootstrap, being a mobile-first CSS framework for responsive web design provides a way of making images responsive.
If you google how to make an image responsive with bootstrap, you will mostly find answers telling you to add a class .img-responsive to your images as below.
<img src="path/to/file/image.jpg" class="img-responsive">
The above code may or may not work in making the image responsive. It entirely depends on the bootstrap version you are working with.
Bootstrap framework is under continuous improvements, and from time to time changes are made between different versions, which may affect how things work.
For instance, in this case, .img-responsive works perfectly well only on bootstrap 3 or earlier versions.
Since bootstrap 4, the .img-responsive class was replaced with .img-fluid.
<img src="path/to/file/image.jpg" class="img-fluid">
Both .img-responsive and .img-fluid works by making the image cover 100% width of the parent element (max-width: 100%;) and having its height scale automatically (height: auto;) in relation to the image width. If the image width is less than that of the parent element, then the image takes its own width and height.
Examples
Responsive images in bootstrap 3
<!DOCTYPE html>
<html>
<head>
<title>Making an image responsive in bootstrap 3</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img class="img-responsive" src="path/to/file/image.jpg">
</div>
</body>
</html>
Note: We have used class="img-responsive".
Responsive images in bootstrap 5
<!DOCTYPE html>
<html>
<head>
<title>Making an image responsive in bootstrap 3</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img class="img-fluid" src="path/to/file/image.jpg">
</div>
</body>
</html>
Note: We have used class="img-fluid".
Responsive images in bootstrap using custom CSS
<!DOCTYPE html>
<html>
<head>
<title>Making an image responsive in bootstrap 3</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.image1 {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img class="image1" src="path/to/file/image.jpg">
</div>
</body>
</html>
Note: We can also use inline CSS on image tags as below:
<img src="path/to/file/image.jpg" style="width: 100%; height: auto;">
Or we can use the HTML width and height attributes as below:
<img src="path/to/file/image.jpg" width = "100%" height = "auto">
Note: If setting width and height with CSS doesn't work, add the !important to the width and height attributes.
.image1 {
width: 100% !important;
height: auto !important;
}
Using col-12 in image class also fixes the problem. It makes the images to always cover 100% width of the parent element.
<img src="path/to/file/image.jpg" class="col-12">
Conclusion
In this article, we have explored the reason why using img-responsive class for your images in bootstrap may not work in making them responsive.
This is most probably caused by using it in bootstrap 4 or a later version. Since bootstrap 4 .img-responsive class is deprecated and has since then been replaced by .img-fluid.
Another way of fixing it is using the class .col-12 in the image, or by styling the image with CSS to take 100% width and setting its height as "auto".
If this article was helpful to you and you would wish to help more people, feel free to link to this page from your website or share it with your networks on social media.