Bootstrap full-width text-input within inline-form

Question

I am struggling to create a textbox that fits the entire width of my container area    lt div class  row  gt       lt div class  col-md-12  gt           lt form class  form-inline  role  form  gt                              lt input type  text  class  form-control input-lg  id  search-church  placeholder  Your location  City  State  ZIP   gt                   lt button type  submit  class  btn btn-lg  gt Search lt  button gt                       lt  form gt       lt  div gt   lt  div gt    When I do the above  the two form elements are in-line  as I expect  but don t take up more than a few columns  at best  Hovering over the col-md-12 div in firebug shows it taking up the expected full width  It s just the text input that doesn t seem to fill  I even tried adding an in-line width value but it didn t change anything  I know this should be simple  just feeling really dumb now   Here is a fiddle  http   jsfiddle net 52VtD 4119 embedded result   EDIT    The selected answer is thorough in every way and a wonderful help  It s what I ended up using  However I think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013  It contained this in Site css   input  select  textarea       max-width  280px      Obviously that was blocking the text-input from expanding appropriately    Fair warning to future ASP NET template users

User · Answer

With Bootstrap  4 1 it s just a case of using the flexbox utility classes  Just have a flexbox container inside your column  and then give all the elements within it the  flex-fill  class  As with inline forms you ll need to set the margins padding on the elements yourself    x000D   x000D   prop-label   x000D      margin   25rem 0  important  x000D    x000D   x000D   prop-field   x000D      margin-left  1rem  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  row  gt  x000D    lt div class  col-12  gt  x000D     lt div class  d-flex  gt  x000D      lt label class  flex-fill prop-label  gt Label  lt  label gt  x000D      lt input type  text  class  flex-fill form-control prop-field  gt  x000D     lt  div gt  x000D    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The bootstrap docs says about this      Requires custom widths Inputs  selects  and textareas are 100  wide by   default in Bootstrap  To use the inline form  you ll have to set a   width on the form controls used within    The default width of 100  as all form elements gets when they got the class form-control didn t apply if you use the form-inline class on your form   You could take a look at the bootstrap css  or  less  whatever you prefer  where you will find this part    form-inline         Kick in the inline    media  min-width   screen-sm-min           Inline-block all the things for  inline       form-group         display  inline-block        margin-bottom  0        vertical-align  middle                In navbar-form  allow folks to  not  use   form-group       form-control         display  inline-block        width  auto     Prevent labels from stacking above inputs in   form-group        vertical-align  middle               Input groups need that 100  width though      input-group  gt   form-control         width  100                            Maybe you should take a look at input-groups  since I guess they have exactly the markup you want to use  working fiddle here     lt div class  row  gt      lt div class  col-lg-12  gt       lt div class  input-group input-group-lg  gt         lt input type  text  class  form-control input-lg  id  search-church  placeholder  Your location  City  State  ZIP   gt         lt span class  input-group-btn  gt           lt button class  btn btn-default btn-lg  type  submit  gt Search lt  button gt         lt  span gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

I know that this question is pretty old  but I stumbled upon it recently  found a solution that I liked better  and figured I d share it  Now that Bootstrap 5 is available  there s a new approach that works similarly to using input-groups  but looks more like an ordinary form  without any CSS tweaks   lt div class  quot row g-3 align-items-center quot  gt       lt div class  quot col-auto quot  gt           lt label gt Label  lt  label gt       lt  div gt       lt div class  quot col quot  gt           lt input class  quot form-control quot  gt       lt  div gt       lt div class  quot col-auto quot  gt           lt button type  quot button quot  class  quot btn btn-primary quot  gt Button lt  button gt       lt  div gt   lt  div gt   The col-auto class makes those columns fit themselves to their contents  the label and the button in this case   and anything with a col class should be evenly distributed to take up the remaining space

User · Answer

have a look at something like this     lt form role  form  gt         lt div class  row  gt         lt div class  col-xs-12  gt           lt div class  input-group input-group-lg  gt               lt input type  text  class  form-control    gt             lt div class  input-group-btn  gt               lt button type  submit  class  btn  gt Search lt  button gt             lt  div gt  lt  --  btn-group -- gt           lt  div gt  lt  --  input-group -- gt         lt  div gt  lt  --   col-xs-12 -- gt       lt  div gt  lt  --   row -- gt   lt  form gt    http   jsfiddle net n6c7v 1

User · Answer

Try something like below to achieve your desired result   input       max-width  100

User · Answer

As stated in a similar question  try removing instances of the input-group class and see if that helps   refering to bootstrap      Individual form controls automatically receive some global styling    All textual     and  elements with    form-control are set to width  100   by default  Wrap labels and   controls in  form-group for optimum spacing

[html] Bootstrap full-width text-input within inline-form

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3