I have a problem with bootstrap form-horizontal, the problem is that I have a horizontal form with two "form-group col-sm-6" groups.
It looks that there is a blank space after the two groups (please see the blue arrow down).
I need to remove that space so the two form-groups are filling the space.
The code I use is:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="animated fadeInUp">
<div class="panel panel-default col-md-12">
<div class="panel-heading"> <b class="text-capitalize">CIF Profile</b>
<div class="actions pull-right"> <i class="fa fa-chevron-down"></i> </div>
</div>
<div class="panel-body">
<div class="form-horizontal col-sm-12" style="background-color:red;">
<div class="form-group col-sm-6" style="background-color:blue;">
<div class="col-sm-6">
<label class="control-label">Customer Id</label>
</div>
<div class="col-sm-6">
<input id="txtCustomerId" name="txtCustomerId" class="form-control" value="" maxlength="6" readonly="readonly">
</div>
</div>
<div class="form-group col-sm-6" style="background-color:white;">
<div class="col-sm-6">
<label class="control-label">Mnemonic</label>
</div>
<div class="col-md-6">
<input id="txtMnemonic" name="txtMnemonic" class="form-control" placeholder="" value="" maxlength="10">
</div>
</div>
</div>
</div>
</div>
</section>