title: Bootstrap Responsive Image Grid
body: <p>I want to create a responsive image grid with Bootstrap. I have 4 images and I need 1x4 grid for desktop size and 2x2 grid for mobile size. I tried the following code, but there are unnecessary blanks between images for desktop size. Also there isn't any space for mobile size. How can I adjust this layout?</p>
  
  <p>Thanks in advance</p>
  
  <p>
      
          
      
  </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"&gt;
              &lt;img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"&gt;
              &lt;img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"&gt;
              &lt;img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-6"&gt;
              &lt;img src=https://i.scdn.co/image/2fd8fa0f7ef2f83691a0fb9628ee369b8e3b688e class="img-responsive"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>