Here’s a guide on how to create a styled and functional OTP Input Field using Bootstrap 5, ensuring a user-friendly verification experience on your website. This tutorial will walk you through the process step-by-step, from setting up the HTML structure to adding CSS styling and JavaScript functionality.
Adding Bootstrap CSS
The first step is to include Bootstrap’s CSS to style your elements. You can achieve this by adding the following link tag to the “ of your HTML document. This will allow you to leverage Bootstrap’s pre-built classes and components.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'>
Creating the HTML Structure
This section focuses on structuring the HTML for the OTP input field. We’ll use Bootstrap’s grid system to center the content and create a visually appealing layout. This will include the input fields, verification button, and a “Resend code” link.
<body class="container-fluid bg-body-tertiary d-block">
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-4" style="min-width: 500px;">
<div class="card bg-white mb-5 mt-5 border-0" style="box-shadow: 0 12px 15px rgba(0, 0, 0, 0.02);">
<div class="card-body p-5 text-center">
<h4>Verify</h4>
<p>Your code was sent to you via email</p>
<div class="otp-field mb-4">
<input type="number" />
<input type="number" disabled />
<input type="number" disabled />
<input type="number" disabled />
<input type="number" disabled />
<input type="number" disabled />
</div>
<button class="btn btn-primary mb-3">
Verify
</button>
<p class="resend text-muted mb-0">
Didn't receive code? <a href="">Request again</a>
</p>
</div>
</div>
</div>
</div>
<div class="footer">
Made with ❤️ by Marcus | Visit <a href="https://shopblocks.com" target="_blank">Shopblocks</a>
</div>
</body>
Styling with CSS
Now, let’s style the OTP input field and related elements using CSS to ensure they look visually appealing and user-friendly. We will define styles for input fields, active state, and other visual enhancements.
.otp-field {
flex-direction: row;
column-gap: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.otp-field input {
height: 45px;
width: 42px;
border-radius: 6px;
outline: none;
font-size: 1.125rem;
text-align: center;
border: 1px solid #ddd;
}
.otp-field input:focus {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.otp-field input::-webkit-inner-spin-button,
.otp-field input::-webkit-outer-spin-button {
display: none;
}
.resend {
font-size: 12px;
}
.footer {
position: absolute;
bottom: 10px;
right: 10px;
color: black;
font-size: 12px;
text-align: right;
font-family: monospace;
}
.footer a {
color: black;
text-decoration: none;
}
Implementing Functionality with JavaScript
This part is all about adding interactivity to the OTP input field. The JavaScript code will automatically focus on the next input field after a digit is entered, disable past input fields, handle backspace functionality, paste functionality, and enable the submit button when all fields are filled.
const inputs = document.querySelectorAll(".otp-field > input");
const button = document.querySelector(".btn");
window.addEventListener("load", () => inputs[0].focus());
button.setAttribute("disabled", "disabled");
inputs[0].addEventListener("paste", function (event) {
event.preventDefault();
const pastedValue = (event.clipboardData || window.clipboardData).getData(
"text"
);
const otpLength = inputs.length;
for (let i = 0; i < otpLength; i++) {
if (i < pastedValue.length) {
inputs[i].value = pastedValue[i];
inputs[i].removeAttribute("disabled");
inputs[i].focus;
} else {
inputs[i].value = ""; // Clear any remaining inputs
inputs[i].focus;
}
}
});
inputs.forEach((input, index1) => {
input.addEventListener("keyup", (e) => {
const currentInput = input;
const nextInput = input.nextElementSibling;
const prevInput = input.previousElementSibling;
if (currentInput.value.length > 1) {
currentInput.value = "";
return;
}
if (
nextInput &&
nextInput.hasAttribute("disabled") &&
currentInput.value !== ""
) {
nextInput.removeAttribute("disabled");
nextInput.focus();
}
if (e.key === "Backspace") {
inputs.forEach((input, index2) => {
if (index1 <= index2 && prevInput) {
input.setAttribute("disabled", true);
input.value = "";
prevInput.focus();
}
});
}
button.classList.remove("active");
button.setAttribute("disabled", "disabled");
const inputsNo = inputs.length;
if (!inputs[inputsNo - 1].disabled && inputs[inputsNo - 1].value !== "") {
button.classList.add("active");
button.removeAttribute("disabled");
return;
}
});
});
In conclusion, following these steps, you should now have a fully functional and styled OTP input field using Bootstrap, enhancing the user experience on your website.