title: Using html input size/maxlength with bootstrap's form-control
body: <p>I came across an interesting issue when trying to use html5's form size/maxlength and bootstrap.</p>
  
  <p>The size is overridden by boostrap's .form-control class, but removing it causes the input to lose its styling.</p>
  
  <p>Code pen : <a href="http://codepen.io/rkhayat/pen/JoeBqx" rel="nofollow">http://codepen.io/rkhayat/pen/JoeBqx</a></p>
  
  <p>Thanks</p>
  
  <pre><code> &lt;div class="container"&gt;
      &lt;div class="form-group"&gt;
          &lt;p&gt;Phone&lt;/p&gt;&lt;input class="form-control" id="inputPhone" maxlength=
          "3" name="phone" required="required" size="3" title="" type="tel"
          value=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--with form-control--&gt;
  
  &lt;div class="container"&gt;
      &lt;p&gt;Notice that removing form-control loses ALL styling, but keeps the
      size from html size input&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="form-group"&gt;
          &lt;p&gt;Phone&lt;/p&gt;&lt;input id="inputPhone" maxlength="3" name="phone"
          required="required" size="3" title="" type="tel" value=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--without form-control--&gt;
  </code></pre>
  
  <p>Edit: Researching I have found this <a href="http://getbootstrap.com/css/#column-sizing" rel="nofollow">http://getbootstrap.com/css/#column-sizing</a></p>
  
  <p>Implemented bootstrap's recommended fix, feels like a hack. </p>
  
  <pre><code>  &lt;div class="col-xs-4"&gt;
              &lt;div class="form-group"&gt;
                  &lt;p&gt;Phone&lt;/p&gt;
                  &lt;div class="col-xs-3"&gt;
                      &lt;input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title=""&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-xs-3"&gt;
                      &lt;input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title=""&gt;
                  &lt;/div&gt;
  
  
                  &lt;div class="col-xs-4"&gt;
                      &lt;input type="tel" name="phone" class="form-control" value="" size="4" maxlength="4" required="required" title=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>