Bootstrap Form Horizontal Alignment Errors - asp.net

Question

My textboxes aren't aligning with my form properly at all. I'm using Bootstrap within ASP.NET MVC 4. As you can see I'm using the form-horizontal div but im not sure why my elements are appearing all out of line. How do I get the elements to align with the labels?
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Label("Please enter the Inventory No", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off"})
#Html.ValidationMessageFor(model => model.Log.InventoryNo)
<span class="help-block">Inventory No is physically located on the Inventory sticker device on the side of a device.</span>
</div>
</div>
<div class="form-group">
#Html.Label("Please add any keywords", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250"})
#Html.ValidationMessageFor(model => model.Tags)
<span class="help-block">Required: Enter the keywords of your fault description. For emample, Printer, Jammed, Paper and etc. </span>
</div>
</div>
<div class="form-group">
#Html.Label("Please enter a description of the fault", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
#Html.ValidationMessageFor(model => model.IncidentDescription)
</div>
</div>

Answer 1

First I would add the form-control class to your textboxes and textarea i.e
#Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off", #class="form-control"})
....
#Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250", #class="form-control"})
See here for more info on form-control:
http://getbootstrap.com/css/
Secondly you need to add your labels within your column divs like this:
<div class="form-group">
<div class="col-md-10">
#Html.Label("Please enter a description of the fault", new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
#Html.ValidationMessageFor(model => model.IncidentDescription)
</div>
</div>
Here is a simple example here:
http://www.bootply.com/128038