Images not resized based on Bootstrap column size

Solution 1:

Try adding this to your stylesheet:

img {
    width: 100%;
}

Update: As an alternative (as pointed out in this answer's comments by @JasonAller), you could add class="img-responsive" to each img element. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See the Bootstrap docs for more info.

update for bootstrap v4

The classname for bootstrap v4 is img-fluid
Bootstrap v4 docs

Solution 2:

With Bootstrap 4 you must use use class="img-fluid", class="img-responsive" will work in 3.x.

Solution 3:

Sometimes on dynamic content when you have no control over what users put in, class="img-responsive" would not work. And 'width: 100%' for each image is tricky as well. So I am using:

img {max-width: 100%;}

Solution 4:

Beware that bootstrap columns have padding as well; that may be unexpected.

The following:

div class="col-sm-6" style="padding:0"

worked for me.