MVC - bootstrap -form control is coming in next line with form-group
26,414
Try to add your class="col-sm-10"
into all of your div.
Like this:
<div class="form-group">
@Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.EmployementTypeID)
</div>
</div>
Author by
Atul Sureka
Updated on July 09, 2022Comments
-
Atul Sureka almost 2 years
I want to use bootstrap formgroup. It works if I have a single label & a control but if there are more than 2 controls (label, control and validation field) then validation field goes in next line.
I tried using form-inline but no luck. Can anybody please tell me how to keep all the elements of form-group in a single line?
<div class="form-group"> @Html.Label("Emp ID", new { @class = "col-sm-2 control-label" }) <div class="col-sm-10"> @Html.TextBoxFor(model => model.EmpID, new { disabled = "disabled", @class = "form-control" }) </div> </div> @* Tried with form-group *@ <div class="form-group"> @Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" }) <div> @Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" }) @* This validation goes in next line, how can we keep it in the same line *@ @Html.ValidationMessageFor(model => model.EmployementTypeID) </div> </div> @* Tried with form-inline *@ <div class="form-inline"> @Html.LabelFor(model => model.Address, Constants.Address, new { @class = "col-sm-2 control-label" }) <div> @Html.TextAreaFor(model => model.Address, new { @class = "form-control col-sm-10" }) @* This validation goes in next line, how can we keep it in the same line *@ @Html.ValidationMessageFor(model => model.Address) </div> </div>
-
Shaiju T over 8 yearsthis is correct way of using Bootstrap Horizontal Form in asp mvc check here for more.