title: Controlling <input> box sizes in a Bootstrap inline form
body: <p>I have a bootstrap v3 inline form: </p>
  
  <pre><code>&lt;div id="searchsection" hidden&gt;
    &lt;form id="searchform" class="form-inline" role="form"&gt;
      &lt;label&gt;Find:&lt;/label&gt; 
      &lt;select id="field" class="form-control"&gt;
        &lt;optgroup label="Strings"&gt;
          &lt;option value="authors" selected="selected"&gt;Authors&lt;/option&gt;
          &lt;option value="title"&gt;Title&lt;/option&gt;
          &lt;option value="pub"&gt;Publication Name&lt;/option&gt;
          &lt;option value="keywords"&gt;Keywords&lt;/option&gt;
          &lt;option value="physloc"&gt;Physical Location&lt;/option&gt;
          &lt;option value="comment"&gt;Comment&lt;/option&gt;
        &lt;/optgroup&gt;
        &lt;optgroup label="Dates"&gt;
          &lt;option value="datepub"&gt;Publication Date&lt;/option&gt;
          &lt;option value="dateread"&gt;Date Read&lt;/option&gt;
        &lt;/optgroup&gt;
      &lt;/select&gt;  
  
      &lt;input type="text" id="narrowon1" class="form-control"/&gt;
      &lt;label for="narrowon2" class="form-control"&gt;&lt;/label&gt; 
      &lt;input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/&gt;
      &lt;input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/&gt;
      &lt;input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/&gt;
    &lt;/form&gt;
  &lt;/div&gt; &lt;!-- end of searchsection --&gt;
  </code></pre>
  
  <p>I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as</p>
  
  <pre><code>$('#narrowon1').attr('size',"6");
  </code></pre>
  
  <p>they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.</p>
  
  <p>What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?</p>