<div class="input-examples">
            <div>
                <h4>Default HTML Input Example</h4>
                <div class="form-group">
                    <label>Tel No.</label>
                    <input type="tel" class="form-control input-date" value="08001234567">
                </div>
            </div>

            <div>
                <h4>Cleave.js Formatted Input Example</h4>
                <div class="form-group">
                    <label>Tel No.</label>
                    <input type="tel" class="form-control cleave-input-telephone"  value="08001234567">
                </div>
            </div>
        </div>
.input-examples {
  display: flex;

}
.input-examples>div {
  flex: 1;
  margin: 1em;
  background: #ececec;
  padding: 0.5em;
}
var cleave = new Cleave('.cleave-input-telephone', {
    delimiters: [' ', ' ', ' '],
    blocks: [4, 4, 3]
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://nosir.github.io/cleave.js/dist/cleave.min.js