Bootstrap Responsive Image Grid
<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>