Space between elements using bootstrap - css

Question

EDIT:
I have updated my demo on JsFiddle please have a look at it.
JSFiddle Demo
I'm not sure what is it that causing the space between inputs and you can see its very inconsistency and give space, what is it that is missing?
CodePen Demo
<div class="col-md-12">
<div class="tab-content">
<div class="tab-pane active cont" id="we">
<span style="float: right; padding: 4px 6px;"><a href='javascript:history.go(-1)'>Go Back to Previous Page</a> </span>
<span style="float: right; padding: 4px 6px;"><font color="red">*</font> Indicates required field</span>
<div class="cl-mcont">
<div class="row">
<div class="col-md-12">
<div class="block-flat">
<div class="page-head">
<h3>
Bootstrap Template
</h3>
</div>
<div class="content">
<form action="/xcel" class="form-horizontal data-parsley-validate" id="fForm" method="post">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Category</label>
<div class="col-sm-6">
<select class="select2" id="on" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Tier</label>
<div class="col-sm-6">
<select class="select2" id="tw" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Name</label>
<div class="col-sm-6">
<input class="form-control" id="te" placeholder=" Name" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Code</label>
<div class="col-sm-6">
<input class="form-control" id="df" name="ClientCode" placeholder=" Code" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Model</label>
<div class="col-sm-6">
<input class="form-control" id="adg" placeholder=" Model" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Center</label>
<div class="col-sm-6">
<input class="form-control" id="fd" placeholder=" Center" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Center</label>
<div class="col-sm-6">
<input class="form-control" id="sa" placeholder=" Center" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Name</label>
<div class="col-sm-6">
<input class="form-control" id="aeh" placeholder=" Name" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
CI </label>
<div class="col-sm-6">
<input class="form-control" id="he" placeholder="CI " type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Production </label>
<div class="col-sm-6">
<input class="form-control" id="jg" placeholder="Production IP" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Action</label>
<div class="col-sm-6">
<select class="select2" id="lk" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Description</label>
<div class="col-sm-6">
<input class="form-control" id="ui" placeholder=" Description" type="text" value="" />
</div>
</div>
</div>
<div style='clear: both'>
</div>
<div style='clear: both'>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Physical </label>
<div class="col-sm-6">
<select class="select2" id="lj" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Read</label>
<div class="col-sm-6">
<input class="form-control" id="io" placeholder=" Read" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Write</label>
<div class="col-sm-6">
<input class="form-control" id="po" placeholder=" Write" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Test</label>
<div class="col-sm-6">
<select class="select2" id=".j" style="width:265px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
</div>
<div class="form-group"> </div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You have two .col-md-6 elements of unequal height.
The next (third) .col-md-6 will always go on the next row, starting from under the tallest of the previous siblings.
If you want to remove that space, you need to make the first .col-md-6 equal in height with the second one, by adding more padding around its inner elements (the .select2s).
UPDATE. One more thing I am noticing: in order to benefit the most from bootstrap's CSS you should stick to its' markup. You are supposed to place .col-XX-Y as direct children of .row or .row-fluid elements. Otherwise you will ask yourself why certain elements seem miss-aligned and it they will be a pain to fix at different responsive levels.
As per comments, I updated your fiddle.
In order to make the two columns equal I made the select2s equal in height as the bootstrap inputs:
.select2-container .select2-selection--single {
height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 34px;
}
.select2-container {
width: 100% !important;
}
Please take note I also removed some inline styling from your html, it's not only the CSS.