Images not resized based on Bootstrap column size

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


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%;}

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