title: Bootstrap full-width text-input within inline-form
body: <p>I am struggling to create a textbox that fits the entire width of my <em>container</em> area.</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>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 <code>col-md-12</code> 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.</p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/52VtD/4119/embedded/result/" rel="noreferrer">http://jsfiddle.net/52VtD/4119/embedded/result/</a></p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>The selected answer is thorough in every way and a wonderful help. It's what I ended up using. <em>However</em> I think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013. It contained this in Site.css:</p>
  
  <pre><code>input,
  select,
  textarea {
      max-width: 280px;
  }
  </code></pre>
  
  <p>Obviously that was blocking the text-input from expanding appropriately... Fair warning to future ASP.NET template users...</p>