bootstrap html equal line spacing - html

Question

I am using the following code with bootstrap library, but the line spacing are not equal, can anyone help me make the line equally spaced?
https://jsfiddle.net/x82tx4hg/
<div class="col-md-11">
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_name">Name</label>
</div>
<div class="col-xs-9">
<input id="menu_dish_name" name="menu_dish[name]" size="30%" type="text" value="Sinagara">
</div>
</div>
<br>
<br>
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_desc">Desc</label>
</div>
<div class="col-xs-9">
<textarea cols="29%" id="menu_dish_desc" name="menu_dish[desc]"></textarea>
</div>
</div>
<br>
<br>
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_price">Price</label>
</div>
<div class="col-xs-9">
<input id="menu_dish_price" name="menu_dish[price]" size="30%" type="text" value="2.0">
</div>
</div>
<br>
<br>
<div class="form-group">
<div class="col-xs-3">Associate Addon Groups</div>
<div class="col-xs-9">
<input name="menu_dish[addon_groups][]" type="hidden" value="">
<select id="menu_dish_addon_groups" multiple="multiple" name="menu_dish[addon_groups][]" size="3" style="width: 32.5%">
<option selected="selected" value="1">Sodas</option>
<option value="2">Condisment</option>
</select>
</div>
</div>
<br>
<br>
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_image">Image</label>
</div>
<div class="col-xs-9">
<input id="menu_dish_image" name="menu_dish[image]" type="file">
</div>
</div>
</div>

Answer 1

I think you need to structure your markup better. Most of the form-group css relies on a parent selector like .form-inline .form-group or .nav-bar .form-group.
Reference the bootstrap docs and examples too.
When done right, you should not need the <br> tag at all.
EDIT
Upon looking at this again, you are omitting <div class="row">'s between your col elements. Look at the grid syntax for more direction.

Answer 2

.form-group was not containing its floats. You could make it contain them with:
.form-group { overflow: hidden }
You’ll also want to take out the spacing <br> elements. Properly spaced example.

Answer 3

I would take out the breaks and use margins or padding to create the spaces
CSS
.col-md-11 .form-group {
display: block;
clear: both;
padding: 1em 0;
margin-bottom: 0;
}
HTML
<div class="col-md-11">
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_name">Name</label>
</div>
<div class="col-xs-9">
<input id="menu_dish_name" name="menu_dish[name]" size="30%" type="text" value="Sinagara">
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_desc">Desc</label>
</div>
<div class="col-xs-9">
<textarea cols="29%" id="menu_dish_desc" name="menu_dish[desc]"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_price">Price</label>
</div>
<div class="col-xs-9">
<input id="menu_dish_price" name="menu_dish[price]" size="30%" type="text" value="2.0">
</div>
</div>
<div class="form-group">
<div class="col-xs-3">Associate Addon Groups</div>
<div class="col-xs-9">
<input name="menu_dish[addon_groups][]" type="hidden" value="">
<select id="menu_dish_addon_groups" multiple="multiple" name="menu_dish[addon_groups][]" size="3" style="width: 32.5%">
<option selected="selected" value="1">Sodas</option>
<option value="2">Condisment</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label for="menu_dish_image">Image</label>
</div>
<div class="col-xs-9">
<input id="menu_dish_image" name="menu_dish[image]" type="file">
</div>
</div>
</div>
https://jsfiddle.net/hk51kctn/