bootstrap input forms alignment - html

Question

I am trying to create a data entry form using bootstrap and forms input.
It seems to work well until on some lines it puts one entry on the line instead of 3.
I have tried various routes and always see this behavior.
Any help at understanding why it is doing this wound be greatly appreciated.
I have a plunker example here
<fieldset class="scheduler-border well">
<legend class="scheduler-border">Customer</legend>
<form class="form-group" role="form">
<div class="form-group left">
<label for="input16" class="col-md-2 control-label">Label A</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label A" placeholder="Label A">
</div>
<label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta">
</div>
<label for="input18" class="col-md-2 control-label">Label C</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label C" placeholder="Label C">
</div>
<label for="input15" class="col-md-2 control-label">Label D</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label AD" placeholder="Label D">
</div>
</div>
</form>
</fieldset>
If you the launch the preview window and increase the width you should be able to see the behavior.

Answer 1

Not entirely sure if this is what you want, but I guess what you mean is that for some screen sizes Label D ends up on the fourth column while it should be on the first. The problem here is that your label Customer Label Alpha Beta takes up too much height and since bootstrap's column are just a clever usage of float:left, Label D will be to the right of it.
The easiest way to adjust your code is to wrap groups of 3 labels/inputs in a .row to clear the floats once a row is full.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<fieldset class="scheduler-border well">
<legend class="scheduler-border">Customer</legend>
<form class="form-group" role="form">
<div class="form-group left container">
<div class="row">
<label for="input16" class="col-md-2 control-label">Label A</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label A" placeholder="Label A">
</div>
<label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta">
</div>
<label for="input18" class="col-md-2 control-label">Label C</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label C" placeholder="Label C">
</div>
</div>
<div class="row">
<label for="input15" class="col-md-2 control-label">Label D</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label AD" placeholder="Label D">
</div>
</div>
</div>
</form>
</fieldset>
Of course this solution isn't prefect, for example your rows might end up with different vertical distances. Maybe getting rid of the -col-* and using the classes .form-inline or `.form-horizontal will work better for you.