Bootstrap: align form labels in different rows

Question

I'm doing a form using Bootstrap 3.3.2 and I'm having problems aligning labels of diferent rows when the elements have diferent col-xs-*

Bootply example

What I need is the Bar and Faa labels to get aligned as well as the Bar's field with Faa's and Bor's ones maintaining the sizes and positions of the fields (Bar's field is double in size ).

Answer 1

Problem is that you're using both form-group and col-xs-* classes on the same div.

What you need is to wrap each form-group in another div with the col-xs-*.

I've fixed your code:

[Bootply fixed][1]

 [1]: http://www.bootply.com/yDbREoFh2v