title: Bootstrap Input Group issues on width of Input Type Date
body: <p>I have been developing an application. After using the assets of bootstrap, i found a strange issue that i cant resolve. I know very much about CSS but this is something very tricky. I am not able to resolve it being a front-end developer.</p>
  
  <p>I have simply added input type date in an bootstrap input group. But after making it more smaller and smaller, it overflows outside the div. I have tried everything to fix it both i had no success at all. I want it work like the simple input group do.</p>
  
  <p>For illustration, i have added a red color at background. to show the difference between date and text inputs.</p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.color { background: red; padding-top:20px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="container"&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-xs-4 col-xs-offset-4"&gt;
           &lt;div class="color"&gt;
              &lt;div class="form-group"&gt; 
              &lt;div class="input-group"&gt; 
                 &lt;span class="input-group-addon"&gt;Date&lt;/span&gt;
                 &lt;input class="form-control " placeholder="From" type="date"&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="form-group"&gt; 
              &lt;div class="input-group"&gt; 
                 &lt;span class="input-group-addon"&gt;Text&lt;/span&gt;
                 &lt;input class="form-control " placeholder="From" type="text"&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Do i miss something?</p>
  
  <p>Thanks</p>