<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="input-group m-5 col-6">
<div class="input-group-prepend">
<span class="input-group-text border-right-0">(</span>
<input class="form-control rounded-0" type="text" id="tel1" name="tel1" maxlength="3" size="3" require="1" value="" />
<span class="input-group-text border-right-0 border-left-0 rounded-0">)</span>
<input class="form-control rounded-0" style="width:100%;" id="tel2" type="text" name="tel2" maxlength="3" size="5" require="1" value="" />
<span class="input-group-text border-right-0 border-left-0 rounded-0">-</span>
<input class="form-control rounded-0" style="width:100%;" id="tel3" type="text" name="tel3" maxlength="4" size="5" require="1" value="" />
<span class="input-group-text border-right-0 border-left-0 rounded-0">#</span>
</div>
<input type="text" name="tel4" id="tel4" maxlength="6" size="6" class="form-control" value="" />
</div>
