Bootstrap 3 button/textbox vertical align without label

Question

Using bootstrap 3, how to align vertically and put a button at the bottom when it doesn't have a label above his column?

Like this situation:

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <label class="control-label">Field 1</label>
            <input type="text" class="form-control">
        </div>
        <div class="col-xs-3 ">
            <div class="text-center">                
                <button class="btn btn-primary">Swap!</button>
            </div>
        </div>
        <div class="col-xs-3">
            <label class="control-label">Field 2</label>
            <input type="text" class="form-control">
        </div>
    </div>
</div>

I have used mainly three solutions:

1. Using 2 rows (one for the labels and one for the textbox and buttons) like https://jsfiddle.net/luancaius/7ygoys11/. This solution is not responsive and create some layout problems.
2. Using margin-top on the middle column. Also has responsive problems.
3. Using a label with non-breaking space, which fix the problem, but it doesn't look very good. This is my current solution. https://jsfiddle.net/luancaius/mr5wLoxf/

Does anyone have a better way to fix this? Or am I doing the layout structure wrong?

Thanks!

Answer 1

You can try aligning with vertical-align:

.col-xs-3 {display:inline-block; vertical-align:bottom; float:none;}

Just make sure there are no spaces in the html between the each of the col-xs-3 divs. Or use a comment to divide them, like this:

<div>...</div><!--  space   --><div>...</div>

https://jsfiddle.net/yw0a6689/

UPDATE: Instead of doing this for every column, you can do it generally like this:

.container > .row > div {display:inline-block; vertical-align:bottom; float:none;}

Or more specific by giving the row a class like .myrow and then declaring:

.myrow > div {display:inline-block; vertical-align:bottom; float:none;}