title: Setting Images Side by Side & responsive in bootstrap
body: <p>I have written a code where 4 images are kept inside div side by side in cols.</p>
  
  <p>Below is the code :</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-3 col-sm-3 col-md-3"&gt;
                  &lt;img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3 col-sm-3 col-md-3"&gt;
                  &lt;img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3 col-sm-3 col-md-3"&gt;
                  &lt;img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3 col-sm-3 col-md-3"&gt;
                  &lt;img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This looks like this in full size window :</p>
  
  <p><a href="https://i.stack.imgur.com/ERqdk.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Now when the window size is minimized, the images looks like this :</p>
  
  <p><a href="https://i.stack.imgur.com/sj5cc.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>I want the image to look the way it looks in the full size even after minimizing without the image getting stretched.</p>
  
  <p>I was able to get the view of above images without it getting stretched when i removed the style: width:100%; height:70%; but then in full sized window the images had blank spaces between each other.</p>
  
  <p>Please help me to get this sorted.</p>