css - Using html input size/maxlength with bootstrap's form-control -

When trying to use Html5 size size / maximum label and bootstrap, I came to an interesting point about

.

The size is overridden by bootstrap. Form-control class, but deleting it causes the input to lose its styling.

Code Pen:

Thanks

  & lt; Div class = "container" & gt; & Lt; Div class = "form-group" & gt; & Lt; P & gt; Phone & lt; / P & gt; Input class = "form-control" id = "input phone" maxlength = "3" name = "phone" required = "required" size = "3" title = "" type = "tele" value = "" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - with form-control - & gt; & Lt; Div class = "container" & gt; & Lt; P & gt; Note that by removing the form control, loses all the styling, but the size stays in the 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; Input id = "inputfone" maxlength = "3" name = "phone" required = "required" size = "3" title = "" type = "tele" value = "" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - Without Form Control - & gt; Edit: Research I've found  
 Recommended Fix of Bootstrap, looks like a hack.  
  & 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; I have lots of form elements (especially the whole  form group ). I just call them  class = "skinny"  and then add: 
 
 . Skinny {padding-left: 0; }  
 
 So far it works fine for me. Have not tried for maximal pill but it resolves my big layout headache!