<div class="container text-center mb-5 mt-5">
	<div class="row">
		<div class="col-md-12">
			<h4><a href="https://codepen.io/piyushpd/pen/MWewXBG" target="_blank">OTP Input Section</a></h4>
		</div>
	</div>
</div>


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group text-center">
								<label class="margin-align">Enter the Code</label>
								<div class="form-group-input otp-form-group mb-3">
									<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
									<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
									<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
									<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
									<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
									<input type="text" minlength="1" maxlength="1" class="form-control otp-inputbar">
								</div>
							</div>
    </div>
    
  </div>
</div>

<div id="errmsg" class="text-center"></div>
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');

button:focus,
input:focus{
  outline: none;
  box-shadow: none;
}
a,
a:hover{
  text-decoration: none;
}

body{
  font-family: 'Roboto', sans-serif;
}

/*------------------  */
.otp-form-group{
    display: flex;
    align-items: center;
    justify-content: center;
}
.otp-inputbar{
    width: 50px;
    height: 50px;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    font-size: 16px;
    color: #333;
}
#errmsg
{
color: red;
}
// --------otp section------
$(".otp-inputbar").keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
        return false;
    }
});
$(".otp-inputbar").on("keyup keydown keypress", function (e) {
    if ($(this).val()) {
        $(this).next().focus();
    }
    var KeyID = e.keyCode;
    switch (KeyID) {
        case 8:
            $(this).val("");
            $(this).prev().focus();
            break;
        case 46:
            $(this).val("");
            $(this).prev().focus();
            break;
        default:
            break;
    }
});

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css

External JavaScript

  1. https://code.jquery.com/jquery-3.4.1.min.js
  2. https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js