Bootstrap-based vertical tab: alignment issues - html

Question

By using Twitter Bootstrap 3.2.0 and a very nice snippet, I've created a menu-box with multiple choices.
For each menu item there is a label and a short description, as shown in figure below:
You could find an example with the code on JSfiddle.
Now, I'd like to:
Align menu-item content on middle (regarding the vertical-alignment);
Align the submit button on bottom-right.
Someone can suggest me how to do that?

Answer 1

1. Align menu-item content on middle (regarding the vertical-alignment):
I've recently used this excellent tutorial by #beaver82minimit that allows to create equal height columns bootstrap style: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
You can use it like this:
<div class="container container-xs-height">
<div class="row row-xs-height">
<div class="col-xs-6 col-xs-height"></div>
<div class="col-xs-3 col-xs-height col-top"></div>
<div class="col-xs-2 col-xs-height col-middle"></div>
<div class="col-xs-1 col-xs-height col-bottom"></div>
</div>
</div>
With the class col-middle you can center your content vertically.
2. Align the submit button on bottom-right
a) Add class bottom-right to the button and remove the wrapping <p>
<button type="button" class="btn btn-primary btn bottom-right" style="margin: 20px 0 0 0;"><span class="glyphicon glyphicon-log-in"></span> Submit</button>
b) Add this to your stylesheet:
.bottom-right {
position: absolute;
right: 0;
bottom: 0;
}
To prevent tab content to overlap with button, add padding-bottom to tab-content div:
div.bhoechie-tab-content{
background-color: #ffffff;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 54px;
}
Here is a demo: http://jsfiddle.net/LaBZP/3/
List-group-item vertical aligning middle:
.text-center {
display: table;
width: 100%;
}
.text-center > div {
display: table-cell;
vertical-align: middle;
}
Add divs under list-group-item to markup:
<a href="#" class="list-group-item idp-group-item text-center">
<div>
<strong>Label B</strong><br/>Label B Desc
</div>
</a>
Demo: http://jsfiddle.net/LaBZP/4/