Bootstrap columns float issue. DIVS need to be same height

Question

I have dynamically generated content formed into 3 bootstrap columns like this...

<div class="col-md-4">
  <div class="article">
  content goes here
  </div>
</div>

The problem is, when columns have different content, the different heights ruin the layout.

How can I force a clear row to be started after every 3 items to avoid this?

So basically...

Answer 1

How can I force a clear row to be started after every 3 items to avoid this

Add a class and try .your-class:nth-child(3n) {clear: left;}