I have a bootstrap v3 inline form:

<div id=searchsection hidden>

  <form id=searchform class=form-inline role=form>

    <label>Find:</label> 

    <select id=field class=form-control>

      <optgroup label=Strings>

        <option value=authors selected=selected>Authors</option>

        <option value=title>Title</option>

        <option value=pub>Publication Name</option>

        <option value=keywords>Keywords</option>

        <option value=physloc>Physical Location</option>

        <option value=comment>Comment</option>

      </optgroup>

      <optgroup label=Dates>

        <option value=datepub>Publication Date</option>

        <option value=dateread>Date Read</option>

      </optgroup>

    </select>  



    <input type=text id=narrowon1 class=form-control/>

    <label for=narrowon2 class=form-control></label> 

    <input type=text id=narrowon2 class=form-control placeholder=YYYYMM hidden/>

    <input type=button id=narrower name=narrower value=Narrow class=form-control btn btn-primary/>

    <input type=button id=widener name=widener value=Widen class=form-control btn btn-primary/>

  </form>

</div> <!-- end of searchsection -->

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

$('#narrowon1').attr('size',6);

they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.

What is a Bootstrap-friendly way to alter the sizes of these input boxes?