Utilizing Bootstrap, I am in the process of creating a small internal website. However, I have encountered some difficulties with a particular layout on the homepage.
The first row consists of link anchors styled as buttons. I want these buttons to all be the same width and height, wrap their text contents, and have a bold 'title' text with summary text, while ensuring that all text is vertically aligned in the middle of the button.
I have managed to set fixed width buttons and enable word wrapping. Yet, I am struggling to make all buttons the same height and to vertically align the text in the middle. Additionally, there seems to be an issue with the line break element.
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;
}
For reference, you can view a Bootply example here.