Perfect 100% width of parent container for a Bootstrap input?

Question

How do I make a Bootstrap input field be exactly 100% as wide as its parent?

As steve-obrien wrote in Bootstrap Issue #1058:

Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.

That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.

score 108 · Accepted Answer · answered Jun 27 '12 at 18:22

108

Applying the input-block-level class works great for me, across various screen widths. It is defined by Bootstrap in mixins.less as follows:

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

This is very similar to the style suggested by 'assembler' in his comment on issue #1058.

answered Jun 27 '12 at 18:22

David J.

31,569
22
122
174

nice tip. Because I'm supporting IE9+ this was enought – Lothre1 May 28 '13 at 00:39
16

For Bootstrap 3, use `form-control`, which adds `width: 100%` – Courtney Christensen Dec 05 '13 at 00:18
42

In BS 3, there is a blanket `max-width:280px` on inputs that is overriding the `form-control` class. Actually, nevermind, that's from a default Site.css that Microsoft includes in new ASP.NET projects. Boo! – Finster Oct 02 '14 at 17:13
4

@Finster boo, indeed. – mcy Aug 31 '15 at 14:13
4

@Finster OMG, thank you so much Fin!!! It was driving me crazy on why my input wide was not growing. STUPID MICROSOFT... GRRR!!! – Arm0geddon Feb 24 '16 at 22:46
1

I had exactly the same problem and removed the setting from site.css. Now to see what else breaks. CSS is still spaghetti :/ – Nick.Mc Jun 07 '16 at 02:32

score 22 · Answer 2 · answered Feb 03 '13 at 01:37

22

Just add box-sizing:

input[type="text"] {
    box-sizing: border-box;
}

answered Feb 03 '13 at 01:37

LaundroMatt

2,158
1
19
20

4

input[type=text] { width: 100%; box-sizing: border-box; height: 28px; } Work for me – Thang Nguyen Jun 21 '13 at 13:27
1

`{ width: 100%; box-sizing: border-box; }` worked for me. – aalaap Mar 05 '19 at 05:07

Dave · Answer 3 · 2018-07-17T15:18:51.980

If you're using C# ASP.NET MVC's default template you may find that site.css overrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

score 8 · Answer 4 · answered Oct 15 '15 at 07:28

For anyone Googling this, one suggestion is to remove all the input-group class instances. Worked for me in a similar situation. Original code:

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" name="time" placeholder="Time">
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <div class="input-group">
            <select name="dtarea" class="form-control">
              <option value="1">Option value 1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <input type="text" name="reason" class="form-control" placeholder="Reason">
      </div>
    </div>
  </div>
</form>

New code:

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <input type="text" class="form-control" name="time" placeholder="Time">
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <select name="dtarea" class="form-control">
            <option value="1">Option value 1</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <input type="text" name="reason" class="form-control" placeholder="Reason">
    </div>
  </div>
</form>

Federico Navarrete · Answer 5 · 2017-06-29T08:16:32.913

5

I found a solution that worked in my case:

<input class="form-control" style="min-width: 100%!important;" type="text" />

You only need to override the min-width set 100% and important and the result is this one:

If you don't apply it, you will always get this:

edited Jun 29 '17 at 08:16

answered Jun 29 '17 at 08:10

Federico Navarrete

3,069
5
41
76

score 3 · Answer 6 · answered Oct 17 '16 at 00:12

In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):

content-box

This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.

border-box

The width and height properties include the content, the padding and border, but not the margin."

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Compatibility for this CSS is good.

score 2 · Answer 7 · answered Jul 11 '19 at 17:51

2

Use .container-fluid, if you want to full-width as parent, spanning the entire width of your viewport.

answered Jul 11 '19 at 17:51

Kvlknctk

634
12
27

1

That works, except that it also adds left and right padding to the parent div and that'll be most certainly not desired. So either you add the class .px-0 in addition to the class .container-fluid to remove these paddings, but a better alternative would be to give the div the sole class .w-100 instead. – legibe Jun 10 '22 at 04:01

score 0 · Answer 8 · answered Sep 20 '16 at 22:11

What about?

    input[type="text"] {
          max-width:none;
   }

Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.

input,select,textarea {
max-width: 280px;}

score -1 · Answer 9 · answered Oct 10 '14 at 03:46

-1

just add:

width: 100% !important;

answered Oct 10 '14 at 03:46

vhstrejo

95
2
2

Perfect 100% width of parent container for a Bootstrap input?

9 Answers9

content-box

border-box

Linked