How to change width of an input field using bootstrap

Question

I tried several things to increase the field for email displayed. As you can see, it's chopped off and it would look better if the field was longer.

The code behind it looks like this:

<div class="row">
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
    </div>
  </div>    
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>
  </div>    
</div>

I've tried changing col-md-4 of the div to col-md-5 or 6 for the div, I've tried changing col-xs-5 to a bigger number as well.

I don't think I need to change col-md-4 to a bigger number for the label.

Any ideas why no changes are showing to make the email field wider? There's plenty of room on the page.

I looked at bootstrap examples and it looks like what I tried should have worked.

How do I get the email address field to be wider?

Update Per suggest answer of @JustLearning, I tried this:

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
            <div class="col-md-4">
                @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-xs-5 col-sm-5 col-lg-5">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-8 col-md-8 col-lg-8">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>

Answer 1

I wound up adding this to site.css:

#step1Edit #EmailAddress{
    width:23em;
}

Then in my RegistrationStep1.cshtml, I added this in the outer div:

<div class="form-horizontal" id="step1Edit">

And that worked with the email identifier, with no changes:

<div class="col-xs-6 col-sm-6 col-lg-6">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-6 col-sm-6 col-md-auto col-lg-6">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
</div>

Answer 2

Added the width to 100% will resolve that issue as below ...

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
            <div class="col-md-4">
                @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required", @style="width:100%" } })
                @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-xs-5 col-sm-5 col-lg-5">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-8 col-md-8 col-lg-8">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required", @style="width:100%" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>

Answer 3

Col-xs-5 is applied to extra small screens only

So what you can do is chain the other screen class E.g:

col-xs-5 col-sm-5 col-md-5 col-lg-5 this will take care of all screen sizes.

Further more, you can reduce you col-xs-5 for the homezip to col-xs-4 col-sm-4 col-md-4 col-lg-4

and increase you email div to

col-xs-8 col-md-8 col-lg-8

Use the above approach to figure out what the grid should look like. Also apply the above approach in the child grid i.e:

    <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
    <div class="col-md-4">
        @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
        @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>

Example of bootstrap grid using col-md classes:

Another thing you can try is input sizing: add class input-sm to you input elements to make them smaller and fit in more text

Answer 4

Here is what I do for Kendo controls:

First create a css class to set width at 100%:

.width100 {
    width: 100%;
}

Then add it to the control:

@Html.EditorFor(model => model.EmailAddress, 
    new { htmlAttributes = new { @class = "form-control width100", @required = "required" } })