increase text box size bootstrap (ASP.NET MVC)

All answers were helpful.

My sollution was to change the default max-width in my css cause it was restricting the size

input, select, textarea {
    max-width: 500px;
}

Then changing the col-md-* class worked fine.

thanks


I'd add a class to your textbox:

 @Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" })

Then style it in your CSS:

.long-textbox{
    width:300px;
}

You can use the size attribute, but I feel this is more of a stylistic thing and should be managed in CSS.


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.