Bootstrap columns skip two places

Question

I have a PHP page with a few items on a page. I want three columns on large monitors but this is what it does. One column just skips two columns on the first page. It does not do that when there's four columns, but I want three.

There are no other style on columns so why does it do this?

Answer 1

Tanbi's suggestion is good as per bootstrap guidelines but if you don't want to add .row div between the item div you can use below mentioned css

.col-md-4:nth-child(3n+3) + .col-md-4{clear:both;}

I'm not sure but I think it's work.

Answer 2

its about elements height. you can use the row classed divs as follow.

<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
</div>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
</div>