Bootstrap Input Group pushes control little to left - css

Question

I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!

Answer 1

This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)

Answer 2

remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.