title: Bootstrap thumbnails same size
body: <p>How to force all thumbnails to have the same height? Text is loaded from DB and there is more of it in some, and less in others. The result is shown on a PrtScr.
  I would like to keep them responsive and same relative size. Should I add white space/trim text or have some sort of container inside? I don't know if this makes sense and how to approach this problem<a href="https://i.stack.imgur.com/w5qy1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w5qy1.png" alt="enter image description here"></a> </p>
  
  <pre><code>   &lt;div class="col-xs-18 col-sm-6 col-md-3"&gt;
        &lt;div class="thumbnail"&gt;
          &lt;img src="http://placehold.it/500x300" alt=""/&gt;
            &lt;div class="caption"&gt;
              &lt;h4 th:text="${game.title}"/&gt;
              &lt;p th:text="${game.shortDescription}"/&gt;
  
  
              &lt;a href="#" class="btn btn-info btn-xs" role="button"&gt;Details&lt;/a&gt; 
              &lt;a href="#" class="btn btn-default btn-xs" role="button"&gt;Info&lt;/a&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have this code from here:</p>
  
  <p><a href="http://bootsnipp.com/snippets/featured/thumbnail-with-caption-amp-buttons" rel="nofollow noreferrer">http://bootsnipp.com/snippets/featured/thumbnail-with-caption-amp-buttons</a></p>