Label height on multicolumn form

Question

On multicolumn bootstrap form with labels on top, if one of the labels is large than column size, inputs will be not aligned. See the example on http://jsfiddle.net/yynkc2zn/

<div class="container">
  <div class="row">
    <form action="#">
      <div class="form-group col-xs-3">
        <label for="field1">This is large label for Field1</label>
        <input type="text" class="form-control" id="field1" placeholder="field1">
      </div>
      <div class="form-group col-xs-3">
        <label for="field2">Field2</label>
        <input type="text" class="form-control" id="field2" placeholder="field2">
      </div>
      <div class="form-group col-xs-3">
        <label for="field3">Field3</label>
        <input type="text" class="form-control" id="field3" placeholder="field3">
      </div>
      <div class="form-group col-xs-3">
        <label for="field4">Field4</label>
        <input type="text" class="form-control" id="field4" placeholder="field4">
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="form-group col-xs-3">
        <label for="field5">Field5</label>
        <input type="text" class="form-control" id="field5" placeholder="field5">
      </div>
      <div class="form-group col-xs-3">
        <label for="field5">Field6</label>
        <input type="text" class="form-control" id="field6" placeholder="field6">
      </div>
    </form>
  </div>
</div>

I've not found good solution for solve this problem. There are some standard solution using bootstrap classes?

Maybe this can help you: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout — d4rty, Apr 28 '16 at 12:08
Furthermore your columns inside your one row are greater than 12! There should be always sum up to 12 — d4rty, Apr 28 '16 at 12:11

score 0 · Answer 1 · answered Apr 28 '16 at 12:13

You can try with this:

$(function() {
  var maximum = null;
  $('label').each(function(){
    var hvalue = $(this).height();
    maximum = (hvalue > maximum) ? hvalue : maximum;
  });
  $('label').css('min-height',maximum+'px');
})

Get height for each label and set min-height for each label with the maximum value

http://jsfiddle.net/yynkc2zn/7

Label height on multicolumn form

1 Answers1