bootstrap form alignment with multiple controls - twitter-bootstrap-3

Question

Hello all I am having my design as follows in my html
#model PPM.Models.ProjectModel
<div class="panel-heading panel-head">Create New Project</div>
<br />
<div class="container">
<div class="form-horizontal">
#using (Ajax.BeginForm("Invite", "Invite", null, new AjaxOptions() { HttpMethod = "post", LoadingElementId = "divLoading", OnSuccess = "getresult" }, null))
{
<div class="form-group">
<label for="ProjectName" class="col-sm-4">Project Name</label>
#Html.EditorFor(model => model.ProjectName, "", new { htmlAttributes = new { #class = "form-control", #placeholder = "Project Name" } })
#Html.ValidationMessageFor(model => model.ProjectName, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<label for="ManagerId" class="col-sm-4">Project Manager</label>
#Html.DropDownListFor(Model => Model.ManagerId, Model.ManagerList, "--SELECT--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.ManagerId, "", new { #class = "text-danger" })
</div>
<div class="control-group">
<label for="Duration">Duration </label>
#Html.EditorFor(model => model.Duration, "", new { htmlAttributes = new { #class = "form-control", #placeholder = "Duration" } })
#Html.ValidationMessageFor(model => model.Duration, "", new { #class = "text-danger" })
#Html.DropDownListFor(Model => Model.DurationId, Model.DurationTypes, "--SELECT--", new { #class = "form-control input-xs" })
#Html.ValidationMessageFor(model => model.DurationId, "", new { #class = "text-danger" })
</div>
<div class="form-group">
<label for="NoOfResources" class="col-sm-4">No Of Resources</label>
#Html.EditorFor(model => model.NoOfResourses, "", new { htmlAttributes = new { #class = "form-control", #placeholder = "Number of resources" } })
</div>
<div class="form-group">
<label for="StartDate" class="col-sm-4">Start Date</label>
#Html.EditorFor(model => model.StartDate, "", new { htmlAttributes = new { #class = "form-control", #placeholder = "Number of resources" } })
</div>
<div class="form-group">
<label for="EndDate" class="col-sm-4">End Date</label>
#Html.EditorFor(model => model.EndDate, "", new { htmlAttributes = new { #class = "form-control", #placeholder = "Number of resources" } })
</div>
}
</div>
</div>
I am getting form as expected but I am unable to align one control inline. can some one help me. I would like to see them in one line

Answer 1

It looks like you aren't using columns for the 'Duration' label so what you have is:
<label for="Duration">Duration </label>
When it should be:
<label for="Duration" class="col-sm-4">Duration </label>
like the rest of your labels.