title: How to make Bootstrap 3 columns align properly when they are different heights?
body: <p>I have a problem with Bootstrap 3 columns. When the 12 columns are filled and I keep adding columns they are stacking under them(normal behavior). But if the columns on top of them have different height, a gutter is created. Is there a way of removing it so they can align properly(with no space)? (desktop)</p>
  
  <pre><code>&lt;div class="row content clearfix"&gt;
      &lt;div class="col-md-4 itms"&gt;
          &lt;div class="user"&gt;
              &lt;a href="#" class="thumbnail-custom"&gt;
                  &lt;img src="logo.jpg" alt="User"&gt;
              &lt;/a&gt;
              &lt;p&gt;Posted by:&lt;/p&gt;
              &lt;p&gt;User&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.col-md-4{
  margin: 0;
  padding: 0;
  min-height: 100px;
          }
  
  .itms {
  border: 2px solid rgba(54, 21, 21, 1);
  }
  .user{
  padding: 5px 0 0 5px;
  max-width: 80px;
  border-right: 2px solid rgba(54, 21, 21, 1);
  }
  
  .user img{
   margin-top: 5px;
   max-width: 77px;
   max-height: 77px;
   margin: -5px 0 0 -5px;
   border-bottom: 2px solid rgba(54, 21, 21, 1);
   }
  </code></pre>