<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> <!------ Include the above in your HEAD tag ----------> <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>