Bootstrap 3 - Link-Buttons that fill Grid Columns - html

Question

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.
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 strong 'title' text with summary text, all text vertically aligned to the middle of the button.
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.
HTML
<div class="container">
<div class="row">
<div class="col-md-2">
<a href="#" class="btn btn-default btn-lg btn-fill" role="button">
<strong>Button A</strong><br/>
<span>Long Summary That's Annoyingly Long</span>
</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-default btn-lg btn-fill" role="button">
<strong>Button B</strong><br>
<span>Very Long Summary</span>
</a>
</div>
</div>
</div>
CSS
.btn-fill {
width: 100%;
white-space: normal;
}
I have a Bootply example here

Answer 1

You could use .btn-toolbar with .btn-group-justified to make it easily (the rendering differs a little bit) :
<div class="container">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a href="#" class="btn btn-default" role="button">
<strong>Part A</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part B</strong><br>
<span>Very Long Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part D</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part E</strong><br>
<span>Long Summary That's Annoyingly Long</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part F</strong><br>
<span>Summary</span>
</a>
<a href="#" class="btn btn-default" role="button">
<strong>Part G</strong><br>
<span>Very Long Summary</span>
</a>
</div>
</div>
</div>
.btn-group-fill-height .btn {
white-space: normal;
}
Bootply

Answer 2

Why not add "text-center" to the anchor class and do something like:
.btn {
height: 170px;
}
For the height problem you're running into. That's an arbitrary number I picked but it worked when I punched it into your example.
Hope that helps.