title: Bootstrap 3 grid layout dynamically generated columns don't clear right
body: <p>I'm trying to generate a bootstrap (v3.0.3) grid layout. Data is dynamically generated with following code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      @foreach (var Node in Model.Tour.Nodes)
      {
          &lt;div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"&gt;
              &lt;div class="thumbnail"&gt;
                  @Node.SomeData
              &lt;/div&gt;
          &lt;/div&gt;
      }
  &lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately, sometimes columns don't clear right as one is taller than the other, and I get something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/0Hw2p.png" alt="Sample grid layout"></p>
  
  <p>I know that there is a way to fix that by adding clearfix class where the new row should start:</p>
  
  <pre><code>&lt;div class="clearfix visible-xx"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But I can't really do it when content is dynamically generated.</p>
  
  <p>Are there any solutions for such problems, or maybe my approach is wrong as I'm new to bootstrap.</p>