title: Bootstrap input form-control not working on mobile device
body: <p>My input in mobile version is not opening the keyboard to type the data. When I click on the input nothing happens (in mobile). This issue only happens in mobile.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
       
      &lt;head&gt;
      
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="author" content=""&gt;
       
       &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
       &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
       &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;/head&gt;
       
      &lt;body&gt;
       &lt;div class="container"&gt;
        &lt;div class="row"&gt;
         &lt;div class="col-md-4"&gt;
          &lt;div class="panel panel-info"&gt;
           &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title" align="center" style="display: inline;font-weight: bold;"&gt;Credit Card&lt;/h3&gt;
           &lt;/div&gt;
           &lt;div class="panel-body"&gt;
            &lt;form role="form"&gt;
            &lt;div class='form-row'&gt;
             &lt;div class="col-xs-12 form-group"&gt;
              &lt;label class='control-label'&gt;Name on Card&lt;/label&gt;
              &lt;input class="form-control" id="nameOnCard" type="text" value=""&gt;
             &lt;/div&gt;
             &lt;div class="col-xs-12 form-group"&gt;
              &lt;label class='control-label'&gt;Card Number&lt;/label&gt;
              &lt;input class="form-control" id="cardNumber" size="20" type='text' value=""&gt;
             &lt;/div&gt;
             &lt;div class="col-xs-6 form-group"&gt;
              &lt;label class='control-label'&gt;Zip Code&lt;/label&gt;
              &lt;input class="form-control" id="zipCode" size="6" type='text' value=""&gt;
             &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='form-row'&gt;
               &lt;div class='col-xs-4 form-group cvc required'&gt;
              &lt;label class='control-label'&gt;CVC&lt;/label&gt;
              &lt;input id="CardCVC" class='form-control' placeholder='ex. 311' size='4' type='text' value=""&gt;
               &lt;/div&gt;
               &lt;div class='col-xs-4 form-group expiration required'&gt;
              &lt;label class='control-label'&gt;Expiration&lt;/label&gt;
              &lt;input class='form-control' id="expMonth" placeholder='MM' size='2' type='text' value=""&gt;
               &lt;/div&gt;
               &lt;div class='col-xs-4 form-group expiration required'&gt;
              &lt;label class='control-label'&gt; &lt;/label&gt;
              &lt;input class='form-control' id="expYear" placeholder='YY' size='2' type='text' value=""&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='form-row'&gt;
              &lt;div class='col-md-12 form-group'&gt;
             &lt;button class='form-control btn btn-primary' type='button' onClick="updateCreditCard();"&gt;Update&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;/form&gt;
           &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/body&gt;
      
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know why it is happening? There is no error in the debug console. When I try it using my computer, the code works fine.</p>
  
  <p>Thanks</p>