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

User · Answer

For anyone Googling this  one suggestion is to remove all the input-group class instances  Worked for me in a similar situation  Original code         x000D   x000D   lt form gt  x000D     lt div class  bs-callout  gt  x000D       lt div class  row  gt  x000D         lt div class  col-md-4  gt  x000D           lt div class  form-group  gt  x000D             lt div class  input-group  gt  x000D               lt input type  text  class  form-control  name  time  placeholder  Time  gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  col-md-8  gt  x000D           lt div class  form-group  gt  x000D             lt div class  input-group  gt  x000D               lt select name  dtarea  class  form-control  gt  x000D                 lt option value  1  gt Option value 1 lt  option gt  x000D               lt  select gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  row  gt  x000D         lt div class  input-group  gt  x000D           lt input type  text  name  reason  class  form-control  placeholder  Reason  gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D     New code    x000D   x000D   lt form gt  x000D     lt div class  bs-callout  gt  x000D       lt div class  row  gt  x000D         lt div class  col-md-4  gt  x000D           lt div class  form-group  gt  x000D             lt input type  text  class  form-control  name  time  placeholder  Time  gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  col-md-8  gt  x000D           lt div class  form-group  gt  x000D             lt select name  dtarea  class  form-control  gt  x000D               lt option value  1  gt Option value 1 lt  option gt  x000D             lt  select gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  row  gt  x000D         lt input type  text  name  reason  class  form-control  placeholder  Reason  gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Just add box-sizing   input type  text         box-sizing  border-box

User · Answer

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

User · Answer

just add   width  100   important

User · Answer

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

User · Answer

I found a solution that worked in my case    lt input class  form-control  style  min-width  100  important   type  text    gt    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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to twitter-bootstrap