Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 426
David J. Avatar asked Jun 27 '12 18:06

David J.


People also ask

How do I change the width of a bootstrap input?

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.

How do I change the width and height of a container in bootstrap?

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.

How do I change the size of the input box in bootstrap 4?

Set the heights of input elements using classes like . input-lg and . input-sm . Set the widths of elements using grid column classes like .


2 Answers

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.

like image 125
David J. Avatar answered Sep 19 '22 09:09

David J.


Just add box-sizing:

input[type="text"] {     box-sizing: border-box; } 
like image 26
LaundroMatt Avatar answered Sep 21 '22 09:09

LaundroMatt