increase text box size bootstrap (ASP.NET MVC)

asp.net, asp.net-mvc, c#, html, twitter-bootstrap

Solution

An alternative way to do this is to just change the col-md-x class on the div that wraps your textbox and validation message to your desired width.

For example, change this:

<div class="col-md-10">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

to this:

<div class="col-md-5">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

And now your textbox will be the 5 column width instead of 10. This requires no extra classes and an added bonus is that if you have a longer validation message, it will wrap within the same space as your textbox.

Problem

Is there a way to increase the size (length) of textboxes in a horizontal form? ``` <div class="form-horizontal"> <div class="form-group"> @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.TextBoxFor(model => model.Name, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Name) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div> </div> ``` I have tried changing the `col-md-*` classes but it hasn't worked.

Original source