How to align vertically an element to the bottom within a bootstrap column? - html

Question

I'm using twitter-bootstrap framework, and bootstrap touchspin plugin. And I want to align the touchspin at the bottom of an column .col-md-6 which has variable height.
I tried adding the following (like this solution):
.row {
position: relative;
}
.bootstrap-touchspin {
position: absolute;
bottom:0;
right:0;
}
But nothing changes. (see jsfiddle)
Why does it not work? Do you have another way to do it?
Here is a jsfiddle where you can try: http://jsfiddle.net/R5n9j/1/
ACTUAL OUTPUT
DESIRED OUTPUT
HTML
<div class="container">
<div class="row">
<div class="col-md-7">
<div id="form-guardar-medidas">
<ul class="nav nav-tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
</ul>
<div id='content' class="tab-content">
<div class="tab-pane active fade in" id="tab1">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/200x200">
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<input id="input-cm" type="text" class="input-lg" name="input-cm">
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">Hello tab2</div>
</div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 20px;
}
.tab-content {
border: 1px solid #ccc;
padding: 15px;
}
JS
$(document).ready(function () {
$("input[name='input-cm']").TouchSpin();
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});

Answer 1

By switching to CSS table layout, you can have columns of same height for free, with the constraint of not being able to relatively position "(visual) cells" (in Firefox, at least) so you must do that on the '(visual) table"
EDIT2: .bootstrap-touchspin is also displayed as table and that fails in Chrome. Adding a div around this component that'll be absolutely positioned (and not the component itself anymore) solves this problem.
Demo: http://jsfiddle.net/R5n9j/9/
Compatibility is IE8+ (because of / thanks to display: table and table-cell)
HTML
<div class="table pos-reference">
<div class="cell">
<img class="img-responsive" src="http://placehold.it/200x200">
</div>
<div class="cell has-touchspin">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<div class="pos-abs">
<input id="input-cm" type="text" class="input-lg" name="input-cm">
</div>
</div>
</div>
CSS
.table {
display: table;
table-layout: fixed;
}
.pos-reference {
position: relative;
}
.cell {
display: table-cell;
vertical-align: top;
}
.has-touchspin {
height: 100%;
padding-bottom: 50px; /* Avoids superposition of content and absolutely positioned touchspin */
}
.pos-abs {
position: absolute;
bottom: 0;
border: 1px solid #F00;
}
EDIT: Explanation about why your attempt at positioning the .input-group failed: TWBS .col-AZ-NN are already relatively positioned so the closest ancestor to .input-group being positioned isn't the one you set but .col-md-6. See Firebug screenshot below. Otherwise, your attempt was a good one ;)

Answer 2

The easiest way is to use flex:
.tab-pane .row{
display:flex;
}
If you notice the height of the two col-md-6 containers inside the tabs, they are not equal, flex when used applies equal height to its child containers.
DEMO
Limitation:
The Safari browser does not support the flex property.

Answer 3

My solution is:
I've added col1 and col2 ids to each columns, and with js I set the same height.
col1h = $("#col1").height();
col2h = $("#col2").height();
if (col1h > col2h) {
def_height = col1h;
} else {
def_height = col2h;
}
$("#col1,#col2").height(def_height);
And adding left: 15px; to .bootstrap-touchspin.
The result http://jsfiddle.net/R5n9j/16/embedded/result