Bootstrap grid items get aligned wrongly on next line

Question

I'm using the Bootstrap grid to display a page of products which are dinamically added to it. Each product has a col-md-3 class and there are 4 products per row. The problem is that when the row is full and a new product is added (hence having to start a new row), the product does not get placed at the beginning of the new row, but somewhere else (either second or third position). You can [see here a screenshot][1] showing the problem.

This is because the div aren't the same height. Since Bootstrap 3 works using floats you will need to equalise the heights OR just make each "row" separate and have 4 col-3 divs in each rather than wrapping an ever-growing list of divs in the container. — Paulie_D, Mar 29 '17 at 14:29
Or use responsive resets/clearfix every x cols as explained in the duplicate. — Carol Skelly, Mar 29 '17 at 14:41

Vivek · Accepted Answer · 2017-03-29T14:39:46.437

-1

<div class= "row">
    <div class="col-xs-6 col-md-3">

   <a href="/collections/summer-collection/products/another-skirt" class="grid__image">
  <div class="my-reveal">
  <img src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0345_123483_large.jpg?v=1486835408" alt="Another Skirt">
  <img class="hidden" src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0353_123483_large.jpg?v=1486835408" alt="Another Skirt">
  </div>
  </a>

   <p class="h4 front-title">
     <a href="/collections/summer-collection/products/another-skirt">Another Skirt</a>
    </p>
    <p>
    <span class="visually-hidden">Regular price</span>
    <br><s>440,00 lei</s>
    </p>

   </div>
</div>

edited Mar 29 '17 at 14:39

answered Mar 29 '17 at 14:26

Vivek

1,375
2
15
24

Can you show Inspect element or Actual Code.How are you adding it dynamically? – Vivek Mar 29 '17 at 14:27
1

You have to put four images in a `
` put repeate in div with class of row. like : – Vivek Mar 29 '17 at 14:37

Bootstrap grid items get aligned wrongly on next line

1 Answers1