title: Bootstrap/css/html: click not working on input and glyphicon not aligned correctly
body: <p>I have the following code for my form:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  
    &lt;link rel="stylesheet" type="text/css" href="flags.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css2.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
    &lt;link rel="stylesheet" href="build/css/intlTelInput.css"&gt;
    &lt;script src="google/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;style&gt;
  
  .d-flex {
      display: flex;
      flex-direction: column;
      height: 89vh;
  
  }
  
  .flex-grow {
      flex-grow:1;
      height: 100%;
  }
  
  #grad1 {
      background: -webkit-linear-gradient(to right, rgba(243,116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Fx 3.6 to 15 */
      background: linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important;/* Standard syntax (must be last) */
      background: -webkit-linear-gradient(left, #F37423,#F37423,#F79831 50%,#F37423,#F37423);
      background: -ms-linear-gradient(left, #F37423,#F37423,#F79831 50%,#F37423,#F37423);
  
  }
  
  
  .active a{
      color: #F37423 !important;
      background-color: transparent !important;
  }
  
  /* enable absolute positioning */
  .inner-addon {
    position: relative;
  }
  
  /* style glyph */
  .inner-addon .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
  }
  
  /* align glyph */
  .left-addon .glyphicon  { left:  0px;}
  .right-addon .glyphicon { right: 0px;}
  
  /* add padding  */
  .left-addon input  { padding-left:  30px; }
  .right-addon input { padding-right: 30px; }
  
  /*select:invalid { color: gray; }
  */
  
  
  &lt;/style&gt;
  
  &lt;body&gt;
  
  
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header page-scroll"&gt;
  
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;a class="navbar-brand" href="index.php"&gt;
            &lt;img src="logo.svg" alt="Nice coconut tree"/&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
  
  
  
        &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
  
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li class="hidden"&gt;&lt;a href="index.php"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="principe.php"&gt;LE PRINCIPE&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="inscription.php"&gt;INSCRIPTION&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="espace.php"&gt;ESPACE CLIENT&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="apropos2.php"&gt;A PROPOS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;NOS ENGAGEMENTS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img class="flag flag-gb" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
        &lt;!-- &lt;hr style="padding-top: 0px;margin-top: 0px;width: 90%;height: 1px; background-color: #BEBEBE;"&gt; --&gt;
      &lt;hr style="padding-top: 0px;margin-top: 0px;width: 90%;margin-bottom: 0px;padding-bottom: 0px;height: 1px; background-color: #BEBEBE;"&gt;
    &lt;/div&gt;
  
  &lt;/nav&gt;
  
  
  &lt;script src="jquery.bootstrap-autohidingnavbar.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  window.addEventListener("scroll", function() {
      if (window.scrollY &gt; 20) {
          $('.navbar').fadeOut();
      }
      else {
          $('.navbar').fadeIn();
      }
  },false);
  
  
  var url = window.location;
  // Will only work if string in href matches with location
  $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
  
  // Will also work for relative and absolute hrefs
  $('ul.nav a').filter(function() {
      return this.href == url;
  }).parent().addClass('active');
  
  &lt;/script&gt;
  
  
  
  
  
  
  
  &lt;div class="container"&gt;
  
    &lt;div class="row flex-grow"&gt;
  
  
      &lt;div class="col-xs-offset-1 col-xs-10 col-lg-12 col-lg-offset-0"&gt;
  
        &lt;div class="row"&gt;
          &lt;br&gt;
          &lt;h1&gt;inscription&lt;/h1&gt;
          &lt;hr style="padding-top:0px;margin-top:0px; border: 1px solid;"&gt; 
        &lt;/div&gt;
  
        &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="row" id="grad1" style="padding-top: 3%;"&gt;
  
  
              &lt;div class="col-lg-8 col-lg-offset-2"&gt;
  
              Nous sommes sincèrement  très heureux&lt;br&gt;
              Nous vous remercions de bien  :
  
              &lt;/div&gt;&lt;br&gt;
  
        &lt;/div&gt;
  
        &lt;div class="row" id="grad1"&gt;
        &lt;br&gt;
  
  
            &lt;div class="col-xs-offset-1 col-xs-10 col-lg-offset-4 col-lg-4"&gt;
  
                  &lt;form method="post" action="serv2.php" onsubmit="return submitForm(this);"&gt; &lt;!-- onsubmit="return submitForm(this);" --&gt;
  
                    &lt;fieldset&gt;
  
                      &lt;div class="row"&gt;
  
                        &lt;div class="form-group col-lg-6"&gt;
                        &lt;label for="sexe" class="radio bold" style="color:white;"&gt;
                        &lt;input type="radio" name="sexe" id="mr"&gt;Homme&lt;/label&gt;
                        &lt;/div&gt;
  
  
                        &lt;div class="form-group col-lg-6"&gt;
                          &lt;label for="sexe" class="radio bold" style="color:white;"&gt;
                          &lt;input type="radio" name="sexe" id="mme"&gt;Femme&lt;/label&gt;
                        &lt;/div&gt;
  
  
                        &lt;div class="form-group col-lg-6 prenom" style="padding-left: 0px;"&gt;
                          &lt;input type="text" id="prenom" name="prenom" class="form-control" placeholder="Prénom"/&gt;
                        &lt;/div&gt;
  
  
                        &lt;div class="form-group col-lg-6 nom" style="padding-left: 0px;padding-right: 0px"&gt;
                          &lt;input type="text" id="nom" name="nom" class="form-control" placeholder="Nom"/&gt;
                        &lt;/div&gt;
  
                          &lt;div class="form-group"&gt;
                            &lt;div class="inner-addon right-addon"&gt;
                              &lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;
                              &lt;input type="text" id="mail" name="mail" class="form-control" placeholder="Email" /&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
  
  
                          &lt;div class="form-group"&gt;
                            &lt;div class="inner-addon right-addon"&gt;
                              &lt;i class="glyphicon glyphicon-lock"&gt;&lt;/i&gt;
                              &lt;input type="password" id="mdp1" name="mdp1" class="form-control" placeholder="Mot de passe (8 caractères min.)" /&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
                          &lt;div class="form-group"&gt;
                            &lt;div class="inner-addon right-addon"&gt;
                              &lt;i class="glyphicon glyphicon-lock"&gt;&lt;/i&gt;
                              &lt;input type="password" id="mdp2" name="mdp2" class="form-control" placeholder="Confirmer le mot de passe" /&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
                          &lt;div class="form-group"&gt;
  
  
                        &lt;?php
                          $selected = '';
  
                          echo '&lt;select class="form-control" id="annee" name="annee"&gt;',"\n";
                          echo '&lt;option value="" disabled selected hidden&gt;Année de naissance&lt;/option&gt;';
                          for($i=1900; $i&lt;=2017; $i++)
                          {
                            if($i == date('Y'))
                            {
                              $selected = ' selected="selected"';
                            }
                            echo "\t",'&lt;option value="', $i ,'"','&gt;', $i ,'&lt;/option&gt;',"\n";
                            $selected='';
                          }
                          echo '&lt;/select&gt;',"\n";
                        ?&gt;
  
                          &lt;/div&gt;
  
  
                            &lt;div class="form-group col-lg-6 col-lg-offset-3"&gt;
                              &lt;div&gt;
                                &lt;label for="bouton"&gt;&lt;br&gt;&lt;/label&gt;
                                &lt;div&gt;
                                  &lt;button type="submit" class="btn btn-default" style="background-color: #00B0F0; color:white; width: 100%;border:none;"&gt;Valider&lt;/button&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
  
                            &lt;div class="form-group col-lg-3"&gt;
                              &lt;div&gt;
                                &lt;label for="message"&gt;&lt;br&gt;&lt;/label&gt;
                                &lt;/div&gt;
                                  &lt;span class="form-control hide" id="error-msg" style="border:none; color: red; background-color:#ED7D31;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;"&gt;mots de passe différents&lt;/span&gt;
  
                             &lt;/div&gt;
  
                      &lt;/div&gt;
  
                    &lt;/fieldset&gt;
  
                  &lt;/form&gt;
              &lt;/div&gt;
  
  
  
        &lt;/div&gt;
  
  
        &lt;div class="row" id="grad1"&gt;
  
  
              &lt;div class="col-lg-8 col-lg-offset-2" style="padding-bottom: 3%;"&gt;
              Après validation vous allez immédiatement reçevoir un Email qui vous permettra
              &lt;/div&gt;
  
        &lt;/div&gt;
  
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css2.css:</p>
  
  <pre><code>@media (max-width: 767px) {
      .col-xs-6 {
          margin-top:-20px;
      }
      .col-xs-12{
      text-align:center;
      }
  }
  
  @font-face {
  
      font-family: 'comforta-reg';
  
      src: url('Comfortaa-Regular.ttf');
  
  }
  
  @font-face {
  
      font-family: 'comforta-bold';
  
      src: url('Comfortaa-Bold.ttf');
  
  }
  
  @font-face {
  
      font-family: 'comforta-light';
  
      src: url('Comfortaa-Light.ttf');
  
  }
  
  
  .bold{
  
      font-family: 'comforta-bold';
  
  }
  
  
  body { padding-top: 70px;
  
  
      font-family: 'comforta-reg', Arial, serif;
  
   }
  
  
  .navbar{
      background-color: white;
      border: 0;
      border-color:#25AAE2;
      box-shadow: none;
      -webkit-box-shadow: none;
      padding-top: 20px;
      padding-bottom:0px;
  }
  
  
  .navbar-nav &gt; li{
    /*padding-left:15px;*/
    padding-right:40px;
  
  }
  
  .navbar-brand img {width: 210px;}
  
  
  .navbar-brand{padding-top: 0px;}
  
  
  /*#ED7D31;*/
  .orange{background-color: #F4862A;} /*Couleur orange*/
  
  .orangeFade{background: radial-gradient(white, #F4862A);}
  
  .row3{background-color: #5F5F5F;}
  
  .indent{ padding-left: 10em;}
  
  
  .iti-flag {background-image: url("img/flags.png");}
  
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .iti-flag {background-image: url("img/flags@2x.png");}
  }
  </code></pre>
  
  <p>It displays this:</p>
  
  <p><a href="https://i.stack.imgur.com/wDRhc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wDRhc.png" alt="this"></a></p>
  
  <p>As you can see, the <code>glyphicon-user</code> is not aligned on the <em>email</em> input as it should be, and also (you can't see it unfortunately), when I click on the <em>Name</em> and <em>Surname</em> input the click has no effect (i.e: impossible to write on those inputs), the same occurs for the female radiobutton.</p>
  
  <p>I really don't see what I am missing here, I am struggling with this for an hour now, any idea ?</p>
  
  <p>Thank you</p>