title: Bootstrap 3 - Link-Buttons that fill Grid Columns
body: <p>I am trying to use Bootstrap to quickly whip up a small internal site and I'm having some issues with a specific layout on it's home page.</p>
  
  <p>I have two rows and the first row is filled with link anchors dressed up as buttons. I want them all to be the same width and height, word wrap their contents and have a <code>strong</code> 'title' text with summary text, all text vertically aligned to the middle of the button.</p>
  
  <p>I've achieved fixed width buttons and word wrap but I can't work out where to go from here to get them all the same height and then, of course, vertically align that text to the middle. I'm sure that line break element isn't helping things either.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-2"&gt;
            &lt;a href="#" class="btn btn-default btn-lg btn-fill" role="button"&gt;
              &lt;strong&gt;Button A&lt;/strong&gt;&lt;br/&gt;
              &lt;span&gt;Long Summary That's Annoyingly Long&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
      &lt;div class="col-md-2"&gt;
        &lt;a href="#" class="btn btn-default btn-lg btn-fill" role="button"&gt;
          &lt;strong&gt;Button B&lt;/strong&gt;&lt;br&gt;
          &lt;span&gt;Very Long Summary&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.btn-fill {
    width: 100%;
    white-space: normal;
  }
  </code></pre>
  
  <p>I have a <a href="http://www.bootply.com/114248" rel="nofollow" title="Bootply Example">Bootply example</a> here</p>