Bootstrap 3 image responsive height not working

Question

I have this div:

<section id="categorias">
 <div class="container content-section">
  <div class="row">
     <div  class="col-md-3">
        <img class="img img-responsive" src="img/catmusica.png"></img>
     </div>
     <div class="col-md-3">
        <img class="img-responsive" src="img/catpaisajes.png"></img>
     </div>
     <div class="col-md-3">
        <img class="img-responsive" src="img/catgrafiti.png"></img>
     </div>
     <div class="col-md-3" >
        <img class="img-responsive" src="img/catpoly.png"></img>
     </div>
  </div>
</div>
</section>

That looks like this:

And I want to maintain the 4 columns or at least 2 above and 2 below when I shrink the window but this happens:

I have only bootstraps css.

Thanks

Answer 1

You should also add grid system classes for smaller screens - col-sm-3 and col-xs-3. See following code:

<section id="categorias">
 <div class="container content-section">
  <div class="row">
     <div  class="col-md-3 col-sm-3 col-xs-3">
        <img class="img img-responsive" src="img/catmusica.png"></img>
     </div>
     <div class="col-md-3 col-sm-3 col-xs-3">
        <img class="img-responsive" src="img/catpaisajes.png"></img>
     </div>
     <div class="col-md-3 col-sm-3 col-xs-3">
        <img class="img-responsive" src="img/catgrafiti.png"></img>
     </div>
     <div class="col-md-3 col-sm-3 col-xs-3" >
        <img class="img-responsive" src="img/catpoly.png"></img>
     </div>
  </div>
</div>
</section>

working example

If you want to have only 2 columns on smaller screens then you need to apply this classes on div wrapping images:

<div  class="col-md-3 col-sm-6 col-xs-6">
   <img class="img img-responsive" src="img/catmusica.png"></img>
</div>