title: Align bootstrap thumbnail component
body: <p>I'm using Bootstrap component, and facing some issues with aligning thumbnail components, due to text, that have various size.</p>
  
  <p>My target is to have a sort of control panel, that display difference access, depending on user right (sometime 3 blocks are displayed, sometimes 10 blocks)</p>
  
  <p>Here is the code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="fr"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="/stylesheets/template.css"&gt;
      &lt;script type="text/javascript" src="/bootstrap/js/bootstrap-filestyle.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/bootstrap/js/bootstrap.min.js" charset="utf-8"&gt;     &lt;/script&gt;     
      &lt;script type="text/javascript"&gt;
        var height = 0;
          $(".col-md-4").each(function(){
            if (height &lt; $(".col-md-4").outerHeight())
              height = $(".col-md-4").outerHeight();
          });
        $(".col-md-4").height(height);
  
  &lt;/script&gt;
  &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div style="text-align:center;" class="row"&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
            &lt;div class="thumbnail"&gt;&lt;img src="/images/fonctionnalites/degustations_300x200.jpg" alt="..." class="img-thumbnail"&gt;
              &lt;div class="caption"&gt;
                &lt;h3&gt;Dégustations&lt;/h3&gt;
                &lt;p&gt;Retrouvez les dernieres dégustations de votre reseau.&lt;/p&gt;
                &lt;p&gt;&lt;a href="" class="btn btn-success btn-block"&gt;Afficher&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
            &lt;div class="thumbnail"&gt;&lt;img src="/images/fonctionnalites/Vins_300x200.jpg" alt="..." class="img-thumbnail"&gt;
              &lt;div class="caption"&gt;
                &lt;h3&gt;Vins&lt;/h3&gt;
                &lt;p&gt;Retrouvez tous les vins de la base et leurs étiquettes&lt;/p&gt;
                &lt;p&gt;&lt;a href="" class="btn btn-success btn-block"&gt;Afficher&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
            &lt;div class="thumbnail"&gt;&lt;img src="/images/fonctionnalites/vignerons_300x200.jpg" alt="..." class="img-thumbnail"&gt;
              &lt;div class="caption"&gt;
                &lt;h3&gt;Vignerons&lt;/h3&gt;
                &lt;p&gt;Rencontrez les Vignerons français et leurs terroirs !&lt;/p&gt;
                &lt;p&gt;&lt;a href="" class="btn btn-success btn-block"&gt;Afficher&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
            &lt;div class="thumbnail"&gt;&lt;img src="/images/fonctionnalites/cavistes_300x200.jpg" alt="..." class="img-thumbnail"&gt;
              &lt;div class="caption"&gt;
                &lt;h3&gt;Cavistes&lt;/h3&gt;
                &lt;p&gt;Rencontrez les Cavistes français proches de vous !&lt;/p&gt;
                &lt;p&gt;&lt;a href="" class="btn btn-success btn-block"&gt;Afficher   &lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here some screenshot depending on the screen size :</p>
  
  <p><img src="https://i.stack.imgur.com/6poLQ.png" alt="enter image description here"></p>
  
  <p>The 4th block is switched to right, due to different block height.</p>
  
  <p>The when i resize the screen, and that all block text required 2 lines, their height become the same, and the world is perfect like this.</p>
  
  <p><img src="https://i.stack.imgur.com/b8J0y.png" alt="enter image description here"></p>
  
  <p>Question : how force this behavior in every screen configuration.</p>
  
  <p>With the CSS (the standard one):</p>
  
  <pre><code>body {
    padding-top: 0px;
    padding-bottom: 75px;
    word-wrap:break-word;
  }
  
  
  
  .starter-template {
    padding: 40px 15px;
    text-align: center;
  
  }
  
  .bs-docs-example 
  {
      position: relative;
      margin: 15px 0;
      padding: 39px 19px 14px;
      background-color: white;
      border: 1px solid #DDD;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
  }
  
  .bs-docs-example::after
  {
      content: "Example";
      position: absolute;
  </code></pre>