title: Bootstrap Columns Not Working When Resizing
body: <p>I'm having a problem where if I resize the browser to small size, the columns don't work and instead each image is shown in different rows. It's shown here: </p>
  
  <p><a href="https://i.stack.imgur.com/MUcxg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MUcxg.png" alt="enter image description here"></a></p>
  
  <p>It does work correctly in bigger size which displays four images in a row. Does anyone know a fix for this?</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-3"&gt;
          &lt;a href="#"&gt;&lt;img src="smiley.gif" alt="Smiley face" height="267" width="187"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-3"&gt;
          &lt;a href="#"&gt;&lt;img src="smiley.gif" alt="Smiley face" height="267" width="187"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-3"&gt;
          &lt;a href="#"&gt;&lt;img src="smiley.gif" alt="Smiley face" height="267" width="187"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-3"&gt;
          &lt;a href="#"&gt;&lt;img src="smiley.gif" alt="Smiley face" height="267" width="187"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>