title: How to handle responsive image in bootstrap on smaller media?
body: <p>Hi I am new in using bootstrap and I am not very good handling responsive image in bootstrap.
  <br/></p>
  
  <h3>So here is my question.</h3>
  
  <p><strong>I have images result formation like this on 992px:</strong><br/></p>
  
  <p><img src="https://i.stack.imgur.com/ebUKj.png" alt=""> </p>
  
  <p>but when I change my screen width to smaller media (e.g:520px) the images come in line with no gaps in it. <br/></p>
  
  <p><strong>It become like this.</strong><br/></p>
  
  <p><img src="https://i.stack.imgur.com/v3USz.png" alt="enter image description here"></p>
  
  <p><strong>I want it like this with padding(gaps) in it.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/TYXGe.png" alt="enter image description here"></p>
  
  <p><strong>here is my HTML code:</strong></p>
  
  <pre><code>&lt;!--two columes 3/1--&gt;
   &lt;div id="first" class="row"&gt;
    &lt;div class="col-md-8"&gt;&lt;img src="http://placehold.it/640x450"  class="img-responsive"&gt;&lt;/div&gt;
    &lt;div class="col-md-4"&gt;&lt;img src="http://placehold.it/300x450"  class="img-responsive"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="clean"&gt;
  &lt;!--two columes 3/1--&gt;
  
  &lt;div id="second" class="row"&gt;
    &lt;div class="col-md-8"&gt;
    &lt;img src="http://placehold.it/640x100"  class="img-responsive"&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;img src="http://placehold.it/640x330"  class="img-responsive"&gt;&lt;/div&gt;
  
    &lt;div class="col-md-4"&gt;&lt;img src="http://placehold.it/300x470"  class="img-responsive"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--two columes half half--&gt;
  &lt;div class="row" id="third"&gt;
    &lt;div class="col-md-6"&gt;&lt;img src="http://placehold.it/470x470"  class="img-responsive"&gt;&lt;/div&gt;
  
    &lt;div class="col-md-6"&gt;&lt;img src="http://placehold.it/470x470" class="img-responsive"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--four columes--&gt;
  &lt;div class="row" id="forth"&gt;
    &lt;div class="col-xs-6 col-sm-3"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive"&gt;&lt;/div&gt;
    &lt;div class="col-xs-6 col-sm-3"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive"&gt;&lt;/div&gt;
  
    &lt;!-- Add the extra clearfix for only the required viewport --&gt;
    &lt;div class="clearfix visible-xs"&gt;&lt;/div&gt;
  
    &lt;div class="col-xs-6 col-sm-3"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive"&gt;&lt;/div&gt;
    &lt;div class="col-xs-6 col-sm-3"&gt;&lt;img src="http://placehold.it/250x250" class="img-responsive"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And here is CSS:</strong></p>
  
  <pre><code>#first
  {
  padding:20px;
  }
  
  #second
  {
  padding:20px;
  }
  #third
  {
  padding:20px;
  }
  #forth
  {
  padding:20px;
  }
  </code></pre>
  
  <p><br/>
  <br/>
  <a href="http://jsfiddle.net/Xitas/DTcHh/839/" rel="nofollow noreferrer"><strong>And this is its fiddle</strong></a>
  <br/>
  <br/></p>