asp.net mvc 5 - Textboxes are different sizes -

i created controllers , views using scaffolded item when run view in program can see textboxes different sizes.how same size? 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 order me</label>                 </div>                 <div>                     <label>@html.radiobutton("deliverychoice", false) pick 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 link picture of screen can see looks messy because textbox sizes different, 'order due date' textbox thick 'customercell' textbox small, 'order due time' thick , short:

edit screen link

the asp.net mvc project template uses bootstrap see (http://getbootstrap.com/) styling html. css file should located @ "content\bootstrap.css". note view includes following classes style form

<div class="form-horizontal"> <div class="form-group"> 

the submit button styled using

<input type="submit" value="save" class="btn btn-default" /> 

and of of htmlhelper methods (such labelfor) contain code additional styles added html. example

new { @class = "control-label col-md-2" } 

in

@html.labelfor(model => model.customerid, "customer cell", new { @class = "control-label col-md-2" }) 

if want use bootstrap style form's controls, need add appropriate bootstrap css classes elements in view.

below examples (not related code) style various elements bootstrap.

to style drop-down list add,

html.dropdownlist("moviegenre", (selectlist)viewbag.moviegenre, "all", new { @class = "form-control" }) 

this results in following html class form-control:

<select class="form-control" id="moviegenre" name="moviegenre"> <option value="">all</option> <option>comedy</option> <option>western</option> </select> 

to style textbox add

@html.editorfor(model => model.genre, new { htmlattributes = new { @class = "form-control" } }) 

to output similar to

<input class="form-control text-box single-line" id="genre" name="genre" type="text" value="comedy" /> 

you might add text-danger bootstrap css class make validation warning text red (or color it's defined in css file) this:

@html.validationmessagefor(model => model.title, "", new { @class = "text-danger" }) 

to learn bootstrap classes form controls take @ bootstrap's documentation.

to figure out place new { @class = "form-control" } line in htmlhelpers take @ documentation (https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper_methods(v=vs.118).aspx)

you can add own css file after bootstrap's css , style elements (including width) yourself, if use bootstrap not recommended.

once style form elements bootstrap, width should same (go bootstrap's website , click on css forms more information).