increase text box size bootstrap (ASP.NET MVC)

Question

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.

Answer 1

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

Answer 2

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.