International Telephone Input - BOOTSTRAP INPUT GROUP

index.html

<h1>International Telephone Input - BOOTSTRAP INPUT GROUP</h1>
<form>
  <div class="input-group">
    <input type="tel" class="form-control">
    <span class="input-group-addon">Tel</span>
  </div>
  <br>
  <div class="input-group">
    <input type="tel" class="form-control">
    <span class="input-group-addon">Tel</span>
  </div>
</form>

international-telephone-input-bootstrap-input-group.markdown

International Telephone Input - BOOTSTRAP INPUT GROUP

My jQuery plugin.

A Pen by Jack OConnor on CodePen.

License.

script.js

$("input").intlTelInput({
  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.6/js/utils.js"
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.7/js/intlTelInput.js"></script>

style.scss

body {
  margin: 20px;
}
form {
  width: 300px;
}

// workaround
.intl-tel-input {
  display: table-cell;
}
.intl-tel-input .selected-flag {
  z-index: 4;
}
.intl-tel-input .country-list {
  z-index: 5;
}
.input-group .intl-tel-input .form-control {
  border-top-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.6/css/intlTelInput.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />