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>

Steve Greene · Accepted Answer · 2019-02-28 17:27:38Z

1

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" } })

answered Feb 28, 2019 at 17:27

Steve Greene

12.4k2 gold badges36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JustLearning · Accepted Answer · 2019-02-28 19:19:51Z

1

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

edited Feb 28, 2019 at 19:19

answered Feb 27, 2019 at 13:30

JustLearning

3,3423 gold badges37 silver badges58 bronze badges

4 Comments

Michele Over a year ago

I'm not sure I'm following. See my update above. It didn't seem to work.

JustLearning Over a year ago

what screen size are you running you running your tests on? as i mentioned col-xs is for extra small screen i.e. mobile. If you see your issue in desktop or table screen size then col-xs is the wrong class to use

Michele Over a year ago

It's just a regular computer monitor. I updated the div for the email to <div class="col-xs-8 col-md-8 col-lg-8">. See Update in my original question. It's still not showing wider for the email field.

JustLearning Over a year ago

first increase your parent div class ie. <div class="col-xs-5 col-sm-5 col-lg-5"> to something like col-xs-8 col-sm-8 etc, So then your email label and input have more screen scace in the second half of he screen, If that does not help setup a jsfiddle and i will take a look. Just remember each row has 12 cells so so your the sum of col-whatever of the two main divs cannot be greater than 12. The same applies for all other bootstrap rows when you are using col-whatever

siri · Accepted Answer · 2019-03-01 15:55:50Z

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>

Michele · Accepted Answer · 2019-03-01 18:25:01Z

0

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>

answered Mar 1, 2019 at 18:25

Michele

3,93613 gold badges57 silver badges103 bronze badges

3 Comments

Steve Greene Over a year ago

Basically, my answer :)

Michele Over a year ago

Not really... I didn't use width 100%. I'm not sure what that would do. And I added the reference to the css in the form class, but you added it in the @html.EditorFor part.

Steve Greene Over a year ago

I meant applying a width to the input itself versus adjusting the bootstrap grid container. Also, your technique is going to require a site.css entry for every control with the issue. Glad you got it working though.

Collectives™ on Stack Overflow

How to change width of an input field using bootstrap

4 Answers 4

Comments

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related