Bootstrap cols height causes next line to start in the wrong place
<p>I'm looping my list of items and each item has <code>&lt;div class="col-md-4"&gt;</code> which makes it to 3 items each row. There are total of 6 records in my template.</p>

<p>My problem is that in the second line some items starts right after the first line of blocks, and some items start in the end of the second line of the blocks. What's wrong?</p>

<p>This is an illustration of how my template is:</p>

<p><a href="https://i.stack.imgur.com/dxlww.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dxlww.png" alt="enter image description here"></a></p>

<p>And this is the desired result:</p>

<p><a href="https://i.stack.imgur.com/m8dym.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m8dym.png" alt="enter image description here"></a></p>

<p>Will be fine if they starts right after the first line, without any space.</p>

<p>Any ideas? </p>

<ul>
<li>It is a problem for me to check for number of items and use <code>&lt;/div&gt;&lt;div class="row"&gt;</code></li>
</ul>