Make Images Responsive by Default in Bootstrap 3

23446
Views

How to Make Images Responsive by Default in Bootstrap

Images are NOT responsive by default in Bootstrap 3. So this article will explain how-to make images responsive by default in Bootstrap. Let’s start by explaining the Bootstrap way of making images responsive then we will create another way.
Make sure you do not have a width and height set in your image html. If you do, get rid of it.

Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.

Make Images Responsive the Bootstrap way:

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

Bootstrap 3 has a special class for responsive images (set max-width to 100%). You will find in the bootstrap.css this class:

.img-responsive {  display: block;  height: auto;  max-width: 100%; }

Therefore you will need to add to every image the class=”img-responsive” so Bootstrap knows what to do.

But there is a better way to make responsive images in Bootstrap.

It can be tedious to add that class to a lot of images. It can be hard to remember to add the class.

So, to make images responsive by default simply add this CSS rule in a CSS file that will load AFTER the bootstrap.css. I do NOT recommend editing the core bootstrap.css. It is always better to create your own custom.css and have it load last.

Add this to your custom css

img { width: 100%; }
you can also use img{display-block; width:100%;}
or
img {
display: inline-block;
height: auto;
max-width: 100%;
}

or img { display:block; height: auto; max-width: 100%; }

Whichever works for you. Display block turns the image to a block element and will put it on its own line. Me; I just use img{width:100%;}

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

That is all there is to it.

woman looking down

Recommended Bootstrap Course

Bootstrap Basics: Program Responsive Websites

P.S. Images are responsive by default in the carousel.

(23446)

Make Images Responsive by Default in Bootstrap 3

Bootstrap 3 | 17 Comments

17 Comments

Share your thoughts!