Responsive OTP Verification Form Design Using Bootstrap 5.

December 27, 2021

Hello readers, in this article we’ll learn how to create Responsive OTP Verification Form Design Using Bootstrap 5. previously I have shared Responsive Forget Password Form Design Using Bootstrap 5. and now it’s time to Responsive OTP Verification Form Design.

On the webpage, there’s an OTP Verification page or form as you can see in the below images. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program.

In this article, you have seen a responsive OTP Verification form and I hope you’ve understood the basic codes behind the screen of this program. I used just a few lines of codes to complete this form so if you’re a beginner, you can easily create this type of OTP Verification form.

In this, we’ve picked up a beautiful login form, registration form, and contact form that you will be able to create your own jquery form from these tutorials. Every form should have client-side validation.

If we have not used client-side validation, the code will go to the server and check the username and password, it will increase server traffic. By using client-side validation null username and password can be filtered in the browser itself so that we can reduce server traffic.

Generally using CSS Signup registration or contact form to allow anyone can become a registered user by providing some personal information, and he can access information and privileges unavailable to non-registered users.

But the important thing is, Most users will not use your website if they have to register because the registration takes time. In most cases, the user will just move on to another website

Play Video

In this article, learn How to Build a responsive OTP Verification Form using Bootstrap 5, It is important to have a OTP Verification form that is not only interactive but also one that looks good. A professional-looking user registration page makes your users trust your site. If you like this program.

First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. if any website has a membership or user feature, then they probably have a separate OTP Verification page.

Today you will learn to create an OTP Verification page Design using pure HTML, CSS, and Bootstrap 5. There is a form, and some texts, You can modify it according to your requirement. I know this is simple work, but one of my visitors asks me for creating this.

So, Today I am sharing a responsive OTP Verification Page In HTML CSS. have used pure CSS for creating all the responsive. You can switch the position of form very easily, you just have to change values or change the class name.

If you like this program and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you’re a beginner you can use this OTP Verification Form in your project and websites. I believe this OTP Verification form code will help you a lot. Or if you have some knowledge of Bootstrap 4 or PHP you can add some functions in this format and use it according to your requirements.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive OTP Verification Form Using Bootstrap 5</title>
	
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="style.css">
</head>
<body> 
    <section class="wrapper">
		<div class="container">
			<div class="col-sm-8 offset-sm-2 col-lg-6 offset-lg-3 col-xl-6 offset-xl-3 text-center">
				<div class="logo">
					<img decoding="async" src="images/logo.png" class="img-fluid" alt="logo">
				</div>
				<form class="rounded bg-white shadow p-5">
					<h3 class="text-dark fw-bolder fs-4 mb-2">Two Step Verification</h3>

<div class="fw-normal text-muted mb-4">
						Enter the verification code we sent to
					</div>

<div class="otp_input text-start mb-2">
                        <label for="digit">Type your 6 digit security code</label>
						<div class="d-flex align-items-center justify-content-between mt-2">
                            <input type="text" class="form-control" placeholder="">
                            <input type="text" class="form-control" placeholder="">
                            <input type="text" class="form-control" placeholder="">
                            <input type="text" class="form-control" placeholder="">
                            <input type="text" class="form-control" placeholder="">
                            <input type="text" class="form-control" placeholder="">
                        </div> 
					</div>

<button type="submit" class="btn btn-primary submit_btn my-4">Submit</button>

<div class="fw-normal text-muted mb-2">
						Didn’t get the code ? <a href="#" class="text-primary fw-bold text-decoration-none">Resend</a>
					</div>
				</form>
			</div>
		</div>
	</section>
</body>
</html>

CSS

/* Google Poppins Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

/* Variables */
:root{
    --primary-font-family: 'Poppins', sans-serif;
    --light-white:#f5f8fa;
    --gray:#5e6278;
    --gray-1:#e3e3e3;
}
body{
    font-family:var(--primary-font-family);
    font-size: 14px;
}

/* Main CSS OTP Verification New Changing */ 
.wrapper{
    padding:0 0 100px;
    background-image:url("images/bg.png");
    background-position:bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    min-height: 100%;
    /* height:100vh;
    display:flex;
    align-items:center;
    justify-content:center; */
}
.wrapper .logo img{
    max-width:40%;
}
.wrapper input{
    background-color:var(--light-white);
    border-color:var(--light-white);
    color:var(--gray);
}
.wrapper input:focus{
    box-shadow: none;
}
.wrapper .password-info{
    font-size:10px;
}
.wrapper .submit_btn{
    padding:10px 15px;
    font-weight:500;
}
.wrapper .login_with{
    padding:8px 15px;
    font-size:13px;
    font-weight: 500;
    transition:0.3s ease-in-out;
}
.wrapper .submit_btn:focus,
.wrapper .login_with:focus{
    box-shadow: none;
}
.wrapper .login_with:hover{
    background-color:var(--gray-1);
    border-color:var(--gray-1);
}
.wrapper .login_with img{
    max-width:7%;
}

/* OTP Verification CSS */
.wrapper .otp_input input{
    width:14%;
    height:70px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

@media (max-width:1200px){
    .wrapper .otp_input input{ 
        height:50px; 
    }
}
@media (max-width:767px){
    .wrapper .otp_input input{ 
        height:40px; 
    }
}

16 thoughts on “Responsive OTP Verification Form Design Using Bootstrap 5.”

Margene says:

June 3, 2022 at 4:45 am

Remarkable! Its in fact awesome post, I have got much clear idea
regarding from this piece of writing.

Reply
Ezekiel says:

July 1, 2022 at 12:51 pm

For the reason that the admin of this site is working, no doubt very quickly it will be well-known, due to its feature contents.

Reply
vorbelutr ioperbir says:

January 16, 2023 at 4:30 am

Perfect piece of work you have done, this internet site is really cool with wonderful information.

Reply
zoritoler imol says:

January 23, 2023 at 1:58 am

Outstanding post, you have pointed out some wonderful points, I besides conceive this s a very superb website.

Reply
zoritoler imol says:

March 25, 2023 at 5:15 pm

I really like meeting useful information , this post has got me even more info! .

Reply
hotel basera mussoorie says:

August 19, 2023 at 5:58 am

Very good blog post. Much obliged.

Reply
bariatric multivitamin capsules says:

September 15, 2023 at 5:25 pm

Hey, thanks for the article post.Really thank you! Keep writing.

Reply
Top Spices Company in India says:

September 17, 2023 at 12:30 am

I really enjoy the blog.Thanks Again. Want more.

Reply
Minoo Welding says:

September 24, 2023 at 8:28 pm

Thanks for the blog.Much thanks again. Much obliged.

Reply
zlv says:

September 29, 2023 at 5:20 pm

Fantastic post.Much thanks again. Will read on…

Reply
bubble chandelier says:

September 30, 2023 at 6:27 am

Looking forward to reading more. Great article post.Thanks Again. Keep writing.

Reply
Rubber Shock Absorber says:

October 1, 2023 at 5:56 pm

I think this is a real great article post.Thanks Again. Really Great.

Reply
BingoRegister says:

October 2, 2023 at 12:56 am

Enjoyed every bit of your post.Really looking forward to read more. Keep writing.

Reply
vapemanufactory says:

October 2, 2023 at 8:50 am

I appreciate you sharing this post.Much thanks again. Want more.

Reply
Hmall says:

November 30, 2023 at 6:35 am

I really enjoy the article post.Much thanks again. Great.

Reply
undress app ai says:

December 30, 2023 at 7:02 am

Very informative blog article.Thanks Again. Really Cool.

Reply