title: How to stop bootstrap rows from overlapping
body: <p>I am new to web designing and bootstrap.</p>
  
  <p>I want to show 4 columns and 3 rows but the rows are overlapping as you can see in the screenshot below</p>
  
  <p><a href="https://i.stack.imgur.com/ZxjHL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZxjHL.png" alt="enter image description here"></a></p>
  
  <p><strong>I am using following code (Which I will be repeating 12 times to get 4 columns and 3 rows.</strong></p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-6 col-md-3 member" style="max-height:256px; min-height:256px;"&gt;
  &lt;div class="well"'.$boxShadowEffect.'&gt;
      &lt;div class="col-xs-12 nopad text-center"&gt;
          &lt;a href="/'.$memberUrl.'"&gt;
          &lt;div style="max-height: 212px; min-height: 212px;"&gt; &lt;img style="max-height: inherit; '.$imageShadowEffect.'" class="img-thumbnail" alt="'.$name.' is a '.$memberProfession.'" src="https://e27.co/img/no_image_profile.png"&gt;
          &lt;/div&gt;
          &lt;/a&gt;
          &lt;a href="/'.$memberUrl.'"&gt;  &lt;h4 class="tmargin bold text-info"  title="'.$nameTitle.'"&gt;'.$name.'&lt;/h4&gt;&lt;/a&gt;
          &lt;a class="tmargin btn btn-sm btn-primary btn-block" href="/'.$memberUrl.'"&gt;View '.$listingLabel.' &lt;/a&gt;                                                  
      &lt;/div&gt;                                              
      &lt;div class="clearfix"&gt;  &lt;/div&gt;                                                                                          
  &lt;/div&gt;                                              
  </code></pre>
  
  <p></p>
  
  <p><strong>Where should I be adding break tag?</strong></p>