I'm having trouble aligning my textboxes with my form in Bootstrap within ASP.NET MVC 4. Despite using the form-horizontal div, my elements are displaying misaligned. How can I ensure that the elements align properly 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>