How to Set a Larger Size for a Textboxfor

Question

I’m using the class form-control of Boostrap, and I’d like to have a Textboxfor with a bigger size, how can I do this ?

<div class="form-horizontal">
<div class="row">
    <div class="form-group">
        @Html.Label("Titulo do E-mail:", new { @class = "col-sm-4 control-label" })
        <div class="col-md-6">
            @Html.TextBoxFor(model => model.strTituloEmail, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.strTituloEmail)
        </div>
    </div>
</div>

Answer 1

You can use Htmlattributes from the Asp.net MVC Htmlhelper itself.

You can just put a style, setting the width to the desired size:

@Html.TextBoxFor(model => model.strTituloEmail, new { @class = "form-control form-control-custom", @style="width:1000px;"})

Result in HTML:

<input class="form-control form-control-custom" id="strTituloEmail" name="strTituloEmail" style="width:1000px;" type="text" value="">

Or creating a class customized to your desired style, for example:

<style>
    .form-control-custom {
        width: 1000px;
    }
</style>

And then use your class customized addition to class bootstrap. (Just don’t forget that your style should always be loaded later than bootstrap, to overwrite it)

@Html.TextBoxFor(model => model.strTituloEmail, new { @class = "form-control form-control-custom"})

Result in HTML:

<input class="form-control form-control-custom" id="strTituloEmail" name="strTituloEmail" type="text" value="">

Use the CSS hierarchy to your advantage, remember what the acronym means CSS (Cascading Style Sheets), use the C.

Answer 2

You can use the Htmlattribute, and use html tags inside your textbox.

In your specific case it would look like this:

  @Html.TextBoxFor(model => model.strTituloEmail, new { @class = "form-control", style = "width:250px; height: 30px;"})

This way you can change the height and width of yourself TextBox changing the values that are in the width and in the height.

You can check the usage in this example: dotNetFiddle

Answer 3

Just add the class and size in Htmlattributes:

Html.TextBoxFor(model => model.TeuCampo, new { @class = "form-control", style="width:50px;"}