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.

Answer 1

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.