LaVOZs

The World’s Largest Online Community for Developers

'; css - Why is my bootstrap (3) grid not responsive? - LavOzs.Com

I'm probably missing something silly here, but I cannot figure out why my bootstrap grid is not responsive. The item data is being passed through by Node and works perfectly - I get a grid of item thumbnails and their captions in rows of 4. But when I minimise the page, the images just get smaller ie they stay in rows of 4. With the col-sm-6 it should surely break into rows of 2 items and eventually 1 item as I reduce the screen width. What am I doing wrong?

    <div class="row text-center" style="display:flex; flex-wrap:wrap">
        <% items.forEach(function(item){ %>
        <div class="col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="<%= item.image %>">
                <div class="caption">
                    <h4><%= item.name %> </h4>
                </div>
            </div>
        </div>
        <% }); %>
    </div>
    </div>

So after try it's actually work well:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row text-center" style="display:flex; flex-wrap:wrap">
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="thumbnail">
      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      <div class="caption">
        <h4>test </h4>
      </div>
    </div>
  </div>
</div>
</div>