Bootstrap - Alignment issue - html

Question

I am trying to align around 5 html components in one single line using bootstrap.
But could not and looks ugly like this, breaking to second line instead of being in one line.
HTML
<div class="form-group">
<p class="col-md-2 badge col-md-offset-1">Column 1</p>
<p class="col-md-1 badge">Column 2</p>
<p class="col-md-1 badge">Column 3</p>
<p class="col-md-2 badge">Column 4</p>
<p class="col-md-2 badge">Column 5</p>
</div>
<div class="form-group" ng-repeat="data in allData">
<label class="control-label col-md-3">{{data.label}}</label>
<div class="input-group col-md-4">
<input id="reportTypeId" type="text" class="form-control" ng-model="data.reportTypeId" style="display: none">
<datepicker date-format="yyyy-MM-dd">
<input id="startDate" type="text" class="form-control" ng-model="data.startDate">
</datepicker>
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
<datepicker date-format="yyyy-MM-dd">
<input id="endDate" type="text" class="form-control" ng-model="data.endDate">
</datepicker>
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
<select class="form-control" ng-model="data.countryId" required="required">
<option value="">Please select</option>
<option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option>
</select>
<select class="form-control" ng-model="data.cityCode" required="required">
<option value="">Please select</option>
<option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option>
</select>
</div>
</div>
Updated:-
JSFiddle : http://jsfiddle.net/jjayaraman/5dbkf1xw/

Answer 1

Hope this is what you are looking for. Took me awhile to figure it out, but I believe it's because you are wanting to hide that first text box, but you were specifying a col-md-1, which made the spacing look out of whack. Remove the col-md-1 and I think it's what you're looking for.
I also added some rows, and the container to get some better spacing.
Note: I was toying with the background-color properties to SEE where stuff was on the page.
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-md-2 badge col-md-offset-1">Column 1</div>
<div class="col-md-2 badge">Column 2</div>
<div class="col-md-2 badge">Column 3</div>
<div class="col-md-2 badge">Column 4</div>
<div class="col-md-2 badge">Column 5</div>
</div>
</div>
<div class="row">
<div class="col-md-1" style="background-color: yellow;">
<input id="reportTypeId" type="text" class="form-control" style="display: none">
</div>
<div class="col-md-2" style="background-color: red;">
<label class="control-label">Label</label>
</div>
<div class="col-md-2 input-group" style="background-color: green; padding-left: 5px; padding-right: 5px; float: left;">
<input id="startDate" type="text" class="form-control" ng-model="data.startDate">
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
</div>
<div class="col-md-2 input-group" style="background-color: blue; padding-left: 5px; padding-right: 5px; float: left;">
<input id="endDate" type="text" class="form-control" ng-model="data.endDate">
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="data.countryId" required="required">
<option value="">Please select</option>
<option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="data.cityCode" required="required">
<option value="">Please select</option>
<option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option>
</select>
</div>
</div>
</div>
http://jsfiddle.net/0yd6c7yt/