title: html issues when trying to renders columns
body: <p>Not to sure why my my products are like this. They are out of order and displaced and looks ugly. The project is in bootstrap 3. Heres the image of how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/JMaHE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JMaHE.png" alt="enter image description here"></a></p>
  
  <p>The code below is in a partial </p>
  
  <pre><code>&lt;% products.each do |product| %&gt;
      &lt;div class="col-md-4"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading preview"&gt;
                  &lt;%= image_tag product.cover_photo(:medium) %&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;%= link_to product.name, product %&gt;&lt;br/&gt;
                  $&lt;%= product.price %&gt; - &lt;%= product.weight %&gt;&lt;br/&gt;
                  &lt;%= product.strain_type %&gt;&lt;br/&gt;
                  &lt;%= product.product_type %&gt;&lt;br/&gt;
                  &lt;span style="color: red;"&gt;THC: &lt;%= product.percentage %&gt;%&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
      $('#star_&lt;%= product.id %&gt;').raty({
          path: '/assets',
          readOnly: true,
          score: &lt;%= product.average_rating %&gt;
        });
  &lt;/script&gt;
  &lt;% end %&gt;
  </code></pre>