Bootstrap Two-Factor Verification Code Form — Free Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bs2fa-card">
    <div class="card-body p-4 text-center">
      <h5 class="fw-bold mb-1">Enter verification code</h5>
      <p class="text-muted small mb-4">We sent a 6-digit code to your email.</p>

      <div class="d-flex gap-2 justify-content-center mb-3" id="bs2faDigits">
        <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bs2fa-box">
        <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bs2fa-box">
        <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bs2fa-box">
        <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bs2fa-box">
        <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bs2fa-box">
        <input type="text" inputmode="numeric" maxlength="1" class="form-control text-center bs2fa-box">
      </div>

      <p class="small mb-3" id="bs2faStatus">&nbsp;</p>
      <button class="btn btn-dark w-100 fw-bold" id="bs2faVerify" disabled>Verify</button>
      <p class="small text-muted mt-3 mb-0">Didn't get it? <a href="javascript:void(0)" id="bs2faResend">Resend code</a></p>
    </div>
  </div>
</div>

.bs2fa-card { width: 380px; border: 1px solid #eceef1; border-radius: 14px; }
.bs2fa-box { width: 44px; height: 52px; font-size: 20px; font-weight: 700; padding: 0; }

const CORRECT = '482913';
const boxes = Array.from(document.querySelectorAll('.bs2fa-box'));
const verifyBtn = document.getElementById('bs2faVerify');
const status = document.getElementById('bs2faStatus');
const resend = document.getElementById('bs2faResend');

function currentCode() { return boxes.map(b => b.value).join(''); }

function checkComplete() {
  verifyBtn.disabled = currentCode().length !== 6;
}

boxes.forEach((box, i) => {
  box.addEventListener('input', () => {
    box.value = box.value.replace(/[^0-9]/g, '').slice(0, 1);
    if (box.value && i < boxes.length - 1) boxes[i + 1].focus();
    checkComplete();
  });

  box.addEventListener('keydown', e => {
    if (e.key === 'Backspace' && !box.value && i > 0) boxes[i - 1].focus();
  });

  // Pasting the whole 6-digit code into any box distributes it across all
  // six inputs at once, instead of only filling the box that was clicked.
  box.addEventListener('paste', e => {
    const text = (e.clipboardData || window.clipboardData).getData('text').replace(/[^0-9]/g, '');
    if (text.length < 2) return;
    e.preventDefault();
    text.slice(0, 6).split('').forEach((ch, idx) => { if (boxes[idx]) boxes[idx].value = ch; });
    checkComplete();
    boxes[Math.min(text.length, 6) - 1].focus();
  });
});

verifyBtn.addEventListener('click', () => {
  const ok = currentCode() === CORRECT;
  status.textContent = ok ? 'Verified successfully.' : 'Incorrect code — try again.';
  status.className = 'small mb-3 ' + (ok ? 'text-success' : 'text-danger');
  boxes.forEach(b => b.classList.toggle('is-invalid', !ok));
});

resend.addEventListener('click', () => {
  boxes.forEach(b => { b.value = ''; b.classList.remove('is-invalid'); });
  boxes[0].focus();
  status.textContent = 'A new code was sent.';
  status.className = 'small mb-3 text-muted';
  checkComplete();
});