title: twitter-bootstrap multiple input group to display the full width of the div
body: <p>With twitter bootstrap, I can get a button to appear the full width of the div by adding the <code>btn-block</code> or <code>form-control</code> classes onto it, like in the example of the first text box below:</p>
  
  <p><a href="https://i.stack.imgur.com/hZTjd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hZTjd.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;input type="text" class="form-control" placeholder="asdf"&gt;
  </code></pre>
  
  <p>However, when using the <a href="http://getbootstrap.com/components/#input-groups-buttons-multiple" rel="nofollow noreferrer">Multiple Button input group</a>, I cannot figure out how to get the width of the text box to equal the full width of its container div minus the width of the other 2 "C" and "M" buttons.</p>
  
  <p>Here is the code that I'm using for this second "C/M/textbox" input:</p>
  
  <pre><code>&lt;div class="input-group input-group-sm"&gt;
    &lt;div class="input-group-btn"&gt;
      &lt;button type="button" class="btn btn-default"&gt;&lt;span class=""&gt;C&lt;/span&gt;&lt;/button&gt;
      &lt;button type="button" class="btn btn-default"&gt;&lt;span class=""&gt;M&lt;/span&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;input type="text" class="form-control"&gt;
  &lt;/div&gt;
  </code></pre>