1
Answer

Re: How to align labels and text boxes

Kyle Oliver

Kyle Oliver
5y
4.6k
1
Hi,
 
I would like to know how to align labels and text boxes so that two appear next to each other as per below image;
 
 
I am working in MVC and my view looks as follows;
  1. @model EmploymentEquity.Models.EmployerDetails  
  2.   
  3. @{  
  4.     ViewBag.Title = "Create";  
  5. }  
  6.   
  7. <h2>Section A: Employer Details</h2>  
  8.   
  9.   
  10. @using (Html.BeginForm())  
  11. {  
  12.     @Html.AntiForgeryToken()  
  13.   
  14.     <div class="form-horizontal">  
  15.         @*<h3>Employer Details</h3>*@  
  16.         <hr />  
  17.         @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
  18.         <div class="form-group">  
  19.             @Html.LabelFor(model => model.TradeName, htmlAttributes: new { @class = "control-label col-md-2" })  
  20.             <div class="col-md-10">  
  21.                 @Html.EditorFor(model => model.TradeName, new { htmlAttributes = new { @class = "form-control" } })  
  22.                 @Html.ValidationMessageFor(model => model.TradeName, "", new { @class = "text-danger" })  
  23.             </div>  
  24.         </div>  
  25.   
  26.         <div class="form-group">  
  27.             @Html.LabelFor(model => model.DtiName, htmlAttributes: new { @class = "control-label col-md-2" })  
  28.             <div class="col-md-10">  
  29.                 @Html.EditorFor(model => model.DtiName, new { htmlAttributes = new { @class = "form-control" } })  
  30.                 @Html.ValidationMessageFor(model => model.DtiName, "", new { @class = "text-danger" })  
  31.             </div>  
  32.         </div>  
  33.   
  34.         <div class="form-group">  
  35.             @Html.LabelFor(model => model.DtiNumber, htmlAttributes: new { @class = "control-label col-md-2" })  
  36.             <div class="col-md-10">  
  37.                 @Html.EditorFor(model => model.DtiNumber, new { htmlAttributes = new { @class = "form-control" } })  
  38.                 @Html.ValidationMessageFor(model => model.DtiNumber, "", new { @class = "text-danger" })  
  39.             </div>  
  40.         </div>  
  41.   
  42.         <div class="form-group">  
  43.             @Html.LabelFor(model => model.SarsNumber, htmlAttributes: new { @class = "control-label col-md-2" })  
  44.             <div class="col-md-10">  
  45.                 @Html.EditorFor(model => model.SarsNumber, new { htmlAttributes = new { @class = "form-control" } })  
  46.                 @Html.ValidationMessageFor(model => model.SarsNumber, "", new { @class = "text-danger" })  
  47.             </div>  
  48.         </div>  
  49.   
  50.         <div class="form-group">  
  51.             @Html.LabelFor(model => model.UifNumber, htmlAttributes: new { @class = "control-label col-md-2" })  
  52.             <div class="col-md-10">  
  53.                 @Html.EditorFor(model => model.UifNumber, new { htmlAttributes = new { @class = "form-control" } })  
  54.                 @Html.ValidationMessageFor(model => model.UifNumber, "", new { @class = "text-danger" })  
  55.             </div>  
  56.         </div>  
  57.   
  58.         <div class="form-group">  
  59.             @Html.LabelFor(model => model.EeNumber, htmlAttributes: new { @class = "control-label col-md-2" })  
  60.             <div class="col-md-10">  
  61.                 @Html.EditorFor(model => model.EeNumber, new { htmlAttributes = new { @class = "form-control" } })  
  62.                 @Html.ValidationMessageFor(model => model.EeNumber, "", new { @class = "text-danger" })  
  63.             </div>  
  64.         </div>  
  65.   
  66.         <div class="form-group">  
  67.             @Html.LabelFor(model => model.SetaID, htmlAttributes: new { @class = "control-label col-md-2" })  
  68.             <div class="col-md-10">  
  69.                 @Html.EditorFor(model => model.SetaID, new { htmlAttributes = new { @class = "form-control" } })  
  70.                 @Html.ValidationMessageFor(model => model.SetaID, "", new { @class = "text-danger" })  
  71.             </div>  
  72.         </div>  
  73.   
  74.         <div class="form-group">  
  75.             <div class="col-md-offset-2 col-md-10">  
  76.                 <input type="submit" value="Create" class="btn btn-primary btn-block" />  
  77.             </div>  
  78.         </div>  
  79.     </div>  
  80. }  
  81.   
  82. <div>  
  83.     @Html.ActionLink("Back to List", "Index")  
  84. </div>  
  85.   
  86. @section Scripts {  
  87.     @Scripts.Render("~/bundles/jqueryval")  
  88. } 
 Thanking you in advance!
 
Regards,
Kyle
Answers (1)
Next Recommended Forum