Bootstrap columns overlapping when shrinking page

Question

When shrinking the screen, these images are overlapping each other. I have made no changes to the css for container-fluid or row.

   <div class="container-fluid bg-grey">
    <div class="row center">
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
    </div>
   </div>

I would like the images to just stack on top of each other, instead of overlapping.

Thanks

Answer 1

The columns will overlap because the <img> elements have a fixed width value. col-*-* have a set percentage width and as soon as that becomes smaller than the width set on the images, overlapping will occur.

To make images responsive you can remove the width property and use the class .img-responsive so that the <img> doesn't exceed the width of the column. It utilizes max-width: 100%.

<img class="img-responsive" src="..." />