Textboxes are different sizes - asp.net-mvc-5

Question

I created my controllers and views using scaffolded item but when I run my view in the program I can see that my textboxes are different sizes.How will I get it to all be the same size?
this is my view:
#model FCproject.Models.Purchase
#{
ViewBag.Title = "Edit2";
}
<h2>Edit2</h2>
#using (Html.BeginForm(new { OrderDate = Model.OrderDate }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Purchase</h4>
<hr />
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.PurchaseID)
<div class="form-group">
#Html.LabelFor(model => model.CustomerID, "Customer Cell", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("CustomerID", String.Empty)
#Html.ValidationMessageFor(model => model.CustomerID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DeliveryChoice, "DeliveryChoice", new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div>
<label>#Html.RadioButton("DeliveryChoice", true) Deliver my order to me</label>
</div>
<div>
<label>#Html.RadioButton("DeliveryChoice", false) I will pick up my order</label>
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderDueDate, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.OrderDueDate)
#Html.ValidationMessageFor(model => model.OrderDueDate)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderTime, "Order Due Time", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.OrderTime)
#Html.ValidationMessageFor(model => model.OrderTime)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderAdress1, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.OrderAdress1)
#Html.ValidationMessageFor(model => model.OrderAdress1)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderAdress2, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.OrderAdress2)
#Html.ValidationMessageFor(model => model.OrderAdress2)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderAdress3, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.OrderAdress3)
#Html.ValidationMessageFor(model => model.OrderAdress3)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
here is a link to a picture of the screen as you can see it looks very messy because the textbox sizes are different, the 'Order Due Date' textbox is too thick the 'CustomerCell' textbox is too small, the 'Order Due Time' is too thick and short:
Edit screen link

Answer 1

The ASP.NET MVC project template uses bootstrap see (http://getbootstrap.com/)
for styling the HTML. The CSS file should be located at "Content\bootstrap.css".
Note that the view includes the following classes to style the form
<div class="form-horizontal">
<div class="form-group">
the submit button is styled using
<input type="submit" value="Save" class="btn btn-default" />
and some of the of the HtmlHelper Methods (such as LabelFor) contain code for additional styles that are added to the HTML.
For example
new { #class = "control-label col-md-2" }
in
#Html.LabelFor(model => model.CustomerID, "Customer Cell", new { #class = "control-label col-md-2" })
if you want to use bootstrap to style your form's controls, then you need to add the appropriate bootstrap CSS classes to the elements in the view.
Below are some examples (not related to your code) to style various elements with bootstrap.
To style a Drop-down list add,
Html.DropDownList("movieGenre", (SelectList)ViewBag.movieGenre, "All", new { #class = "form-control" })
this results in the following HTML with the class form-control:
<select class="form-control" id="movieGenre" name="movieGenre">
<option value="">All</option>
<option>Comedy</option>
<option>Western</option>
</select>
to style a textbox add
#Html.EditorFor(model => model.Genre, new { htmlAttributes = new { #class = "form-control" } })
to get output similar to
<input class="form-control text-box single-line" id="Genre" name="Genre" type="text" value="Comedy" />
you might also add the text-danger bootstrap CSS class to make the validation warning text red (or the color it's defined to be in the CSS file) like this:
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
To learn about bootstrap classes for form controls take a look at bootstrap's documentation.
To figure out where to place the new { #class = "form-control" } line in the HtmlHelpers take a look at its documentation (https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper_methods(v=vs.118).aspx)
You can also add your own CSS file after bootstrap's CSS and style the elements (including width) by yourself, but if you use bootstrap this is not recommended.
Once you style the form elements with bootstrap, their width should be the same
(go to bootstrap's website and click on CSS then Forms for more information).