<section class="container-fluid">
	<div class="row">
		<div class="col-md-8 offset-md-2">
			<form class="text-center">
				<div class="form-group">
					<label for="password" class="text-white">Enter 4 Digit Password</label>
					<div class="passcode-wrapper">
						<input id="codeBox1" type="number" maxlength="1" max="9" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)">
						<input id="codeBox2" type="number" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)">
						<input id="codeBox3" type="number" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)">
						<input id="codeBox4" type="number" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)">
					</div>
				</div>
			</form>
		</div>
	</div>
</section>
// Body Styling only Begin ==============
body{text-align: center;background-color: lightcyan;font-family: 'POPPINS', Open-Sans;background: linear-gradient(to right, #4568dc, #b06ab3);}
::selection {color: #8e44ad;}
// Body Styling only End ================


// Container-fluid Styling only Begin ===
.container-fluid {
	.row {
		align-items: center;
		width: 100vw;
		height: 100vh;
	}
}
// Container-fluid Styling only End =====


// =====
// Passcode-wrapper Styling only Begin ==
.passcode-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: auto;
	margin: 0 auto;
	input {
		width: 50px;
		height: 50px;
		padding: 0;
		margin-right: 5px;
		text-align: center;
		border: 1px solid gray;
		border-radius: 5px;
		&:last-child {
			margin-right: 0;
		}
		&::-webkit-inner-spin-button, 
		&::-webkit-outer-spin-button { 
			-webkit-appearance: none;
			appearance: none;
			margin: 0;
		}
		&:focus,
		&.focus {
			border-color: green;
			outline: none;
			box-shadow: none;
		}
	}
}
// Passcode-wrapper Styling only End ====
View Compiled
function getCodeBoxElement(index) {
  return document.getElementById('codeBox' + index);
}
function onKeyUpEvent(index, event) {
  const eventCode = event.which || event.keyCode;
  if (getCodeBoxElement(index).value.length === 1) {
	 if (index !== 4) {
		getCodeBoxElement(index+ 1).focus();
	 } else {
		getCodeBoxElement(index).blur();
		// Submit code
		console.log('submit code ');
	 }
  }
  if (eventCode === 8 && index !== 1) {
	 getCodeBoxElement(index - 1).focus();
  }
}
function onFocusEvent(index) {
  for (item = 1; item < index; item++) {
	 const currentElement = getCodeBoxElement(item);
	 if (!currentElement.value) {
		  currentElement.focus();
		  break;
	 }
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css