Boostrap and Html - why is one input box full width and the others so short?

bootstrap input width
bootstrap 4 input width
bootstrap form
bootstrap 4 select dropdown
bootstrap button
bootstrap 3
bootstrap container
bootstrap grid

Why is one input box full width and the others so short? This is my html. I am using bootstrap:

                <form action="https://www.example.net/auth/create_user" class="form-horizontal" id="login-attempts-form-admin method="post" accept-charset="utf-8">

                <div class="container">
                    <div class="row">        
                     <div class="col-sm-6 col-xs-6">   

                        <!-- id -->
                        <div class="form-group">     
                            <label for="id">
                                Reference Id
                            </label>
                            <div class="input-group">
                            <input type="text" name="id" value="" id="id" style="" class="form-control" placeholder="" disabled="disabled"  />
                                <div class="input-group-addon"><i class="ti-info"></i>
                                </div>
                            </div> <!-- end input group -->
                            <span class="help-block">
                                The Reference Id is created automatically.
                            </span>
                        </div> <!-- end form-group Id -->


                        <!-- ip_address -->
                        <div class="form-group">
                            <label for="ip_address">
                                IP Address
                            </label>
                            <div class="input-group">
                            <input type="text" name="ip_address" value="" id="ip_address" style="max-width:none !important" class="form-control input-xlarge" placeholder=""  />
                            </div> <!-- end input group --> 
                        </div> <!-- end form-group ip_address -->

                        <!-- login -->
                        <div class="form-group">
                            <label for="login">
                                Login
                            </label>
                            <div class="input-group">
                            <input type="text" name="login" value="" id="login" style="" class="form-control" placeholder=""  />
                            </div> <!-- end input group -->
                        </div> <!-- end form-group login -->
                        </div>
                    </div> <!-- end of row -->        
                </div> <!-- end of container. -->

                </form>  

I even tried to make the ip_address field wider by stating style="max-width:none !important" but no use. Is there any way to make the fields wider? Is there a preset width in bootstrap? I was of the belief the default was max width.

This is what my final output looks like:


Low rep to add as a comment, but trying your code end up with same length input fields. So don't see a problem from my end. One thing maybe the version of bootstrap you are using, as I used the latest from the Bootstrap page (4.1.3), as older versions might have some changes within the CSS. You could add your CSS which would give a better view if you are not changing something. Another thing is to try:

input {
    max-width: 100%;
}

Layout, How do I change the size of the input box in HTML? With Bootstrap 4 We’ve dropped .input-group-addon and .input-group-btn for two new classes, .input-group-prepend and .input-group-append. :( – danger89 Mar 9 '19 at 0:46 add a comment |


When I tested the code I didn't see any different widths with the inputs.

On ip_address field, I am using style="max-width:none !important"... Any CSS you add will not work with the inline style max-width:none; !important.

It will override any changes you are making in the CSS file or any where else. Inline styles especially !important will override any attached style sheets or classes.

I think the problem may be you have this on your input style="max-width:none !important"It is overriding the default bootstrap setting and not setting your input to max width.

That's if you want them wider, shorter wrap in a <div> then manipulate the <div> with CSS or the "col-sm-6" etc.. classes.

Example from Bootstrap website version 4. Also, version 3 has the "form-control" class as well. It makes your form 100% width then you can manipulate it by wrapping in a <div> of your choice or another suitable element or CSS.

EXAMPLE:

    <form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

https://getbootstrap.com/docs/4.0/components/forms/

100% width Twitter Bootstrap 3 template, What layout is used for providing 100% width in bootstrap? Bootstrap Tutorial - Create text input with full width minus button width. Back to Form ↑ The following code shows how to create text input with full width minus button width.


When I tested the input field lengths weren't different. But if it happens try styling the input tag with

    <input style="max-width: 100%">

or add this to css

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  input, select, textarea { max-width: 280px;} to your fiddle and it works just fine. You should never ever update bootstrap.css or bootstrap.min.css. Doing so will set you up to fail when bootstrap gets updated. That is why the site.css file is included.


Be sure to use an appropriate type attribute on all inputs (e.g., email for email email"> <small id="emailHelp" class="form-text text-muted">We'll never share your plain text, use the .form-control-plaintext class to remove the default form field Checkboxes and radios use are built to support HTML-based form validation  How to Use Bootstrap With HTML (Updated on November 20, 2019) Bootstrap is an open source HTML, CSS and Javascript framework that makes the UI development easier with pre built responsive classes and other utilities.


Bootstrap makes use of certain HTML elements and CSS properties that It's so that content within grid columns is lined up with non-grid content. Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. Stack the columns on mobile by making one full-width and the other  Bootstrap is a powerful toolkit. It comes bundled with basic HTML and CSS design templates that include many common UI components. Most of the important pitfalls are mentioned in the documentation, but still some Bootstrap mistakes are pretty subtle, or have ambiguous causes.


Cards are built with as little markup and styles as possible, but still manage to Cards have no fixed width to start, so they'll naturally fill the full width of its In the same way, links are added and placed next to each other by adding .card-link to an <a> Text within .card-text can also be styled with the standard HTML tags. When I do the above, the two form elements are in-line, as I expect, but don't take up more than a few columns, at best. Hovering over the col-md-12 div in firebug shows it taking up the expected full width. It's just the text input that doesn't seem to fill. I even tried adding an in-line width value but it didn't change anything.