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.
Change the size of the input groups, by adding the relative form sizing classes like . input-group-lg, input-group-sm, input-group-xs to the . input-group itself.
Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.
Set the heights of input elements using classes like . input-lg and . input-sm . Set the widths of elements using grid column classes like .
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.
Just add box-sizing:
input[type="text"] { box-sizing: border-box; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With