Skip to main content

OTP Verification Card Design | HTML CSS And Bootstrap

by Rustcode
OTP-Verification-Card-Design-html-csss-and-bootstrap

OTP Verification Card Design HTML CSS And Bootstrap

"OTP Verification Card" is a common feature you've probably come across on many websites. We will design "otp verification card" using html, CSS and bootstrap. It's used whenever a website or mobile app asks you to confirm your email or phone number. You'll also find this design in mobile apps for things like online shopping, cab booking, and food delivery.

In this article, we're not handling the actual otp verification process. Instead, we're focusing on the user interface (front end) that provides various options, such as resending the OTP, entering the OTP code, and displaying the last digit of the mobile number. Our OTP Verification Card has a four-row layout, which we'll discuss in more detail later on.

we have a dedicated collection of different cards commonly used in web development for front-end design. If you're interested in exploring that playlist, you can visit this link.

 

Table Of Contents

Read Also:

HTML:

We're beginning with Bootstrap because it's crucial for this design. To include Bootstrap 5, we'll add the online link to our HTML document. Right below, we've set up the basic structure of the HTML document. This ensures that our design will be built on the Bootstrap foundation.

<!DOCTYPE html>
<html>
  <head>
    <title>OTP Verification Card Design | Rustcode</title>
  </head>
  <body>
   // html code 
</body>
</html>

Now, let's add the Bootstrap link to this HTML document. In the document's head section, we'll include Bootstrap CSS and Font Awesome files. If you decide to use Bootstrap JavaScript functions, you can add the Bootstrap script link at the bottom of the HTML document. This helps enhance the design and functionality of your website.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

Now, this HTML document is prepared for Bootstrap integration, and the end result will resemble the document below.

<!DOCTYPE html>
<html>
  <head>
    <title>OTP Verification Card Design | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
  </head>
  <body>
   // html code 
</body>
</html>

Let's talk about how we created this OTP verification card. We've organized the card into four rows, each with important information such as the OTP input field, verification button, option to resend OTP, and more.

  • 01. OTP Card Image
  • 02. OTP Inputs
  • 03. OTP Resend Action
  • 04. OTP Verify Button

As you can see in the image each row has different content of this card.

01. OTP Card Image: This container contains a mobile image and some text containing the mobile number where the OTP will reach.

02. OTP Inputs: This line has five inputs which we will use to enter the received otp

03. OTP Resend Action: Sometimes it takes time to send OTP to the customer by the OTP system and sometimes the message does not reach the customer, that's why the Resend option is given in the OTP verification page. We are also providing that feature.

04. OTP Verify Button: it contains one button that is used to verify the OTP.

Now that you have a grasp of the OTP verification card layout and its fundamental flow, you can proceed with coding using Bootstrap classes. If needed, you can download the mobile image for reference from this source. 

<div class="container d-flex justify-content-center align-items-center">
  <div class="card text-center">
    <div class="card-header p-5">
      <img src="mobile.png">
      <h5 class="mb-2">OTP VERIFICATION</h5>
      <div>
        <small>code has been send to ******1258</small>
      </div>
    </div>
    <div class="input-container d-flex flex-row justify-content-center mt-2">
      <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
      <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
      <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
      <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
      <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
    </div>
    <div>
      <small>
      didn't get the otp
      <a href="#" class="text-decoration-none">Resend</a>
      </small>
    </div>
    <div class="mt-3 mb-5">
      <button class="btn btn-success px-4 verify-btn">verify</button>
    </div>
  </div>
</div>

Now, let's take a look at the entire HTML document with all the code and necessary components included.

<!DOCTYPE html>
<html>
  <head>
    <title>OTP Verification Card Design | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container d-flex justify-content-center align-items-center">
      <div class="card text-center">
        <div class="card-header p-5">
          <img src="mobile.png">
          <h5 class="mb-2">OTP VERIFICATION</h5>
          <div>
            <small>code has been send to ******1258</small>
          </div>
        </div>
        <div class="input-container d-flex flex-row justify-content-center mt-2">
          <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
          <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
          <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
          <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
          <input type="text" class="m-1 text-center form-control rounded" maxlength="1">
        </div>
        <div>
          <small>
          didn't get the otp
          <a href="#" class="text-decoration-none">Resend</a>
          </small>
        </div>
        <div class="mt-3 mb-5">
          <button class="btn btn-success px-4 verify-btn">verify</button>
        </div>
      </div>
    </div>
  </body>
</html>

This code is a work in progress. Currently, only the HTML part is completed, and it's using Bootstrap's default design, which produces an output similar to the image displayed below. Our custom CSS will be incorporated later in the process.

Read Also:

CSS:

Bootstrap makes web development easier by providing ready-to-use classes, which means you don't have to write a lot of CSS code from scratch. If you want to learn how to include CSS in HTML documents, you can check out this article, where we explain all methods.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
*{
  border-radius: 0px !important;
  font-family: "Poppins", sans-serif;
}

body{
  background-color: #e1e1e1 !important;
  display: flex;
  align-items: center;
  height: 100vh;
}

.card{
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.card-header{
  color: white !important;
  background: #3366FF !important;
  text-align: center;
}

.card-header > img{
  width: 180px;
}

.input-container input{
  width: 40px;
  height: 40px;
}

.form-control:focus{
  box-shadow: none !important;
  border: 1px solid #3366FF !important;
}

.verify-btn{
  border-radius: 20px !important;
  border: 0px !important;
  width: 140px;
  background-color: #3366FF !important;
}

  • @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');: This line imports the Poppins font styles from Google Fonts with specific weights.

  • *: This selects all elements on the page.

  • border-radius: 0px !important;: Removes any border-radius from all elements.

  • font-family: "Poppins", sans-serif;: Sets the font for all text to Poppins or a sans-serif font if Poppins is unavailable.

  • body: Styles the body of the page.

  • background-color: #e1e1e1 !important;: Sets the background color to a light gray.

  • display: flex; align-items: center; height: 100vh;: Makes the body a flex container, centers its contents vertically, and sets its height to 100% of the viewport.

  • .card: Styles elements with the class "card."

  • border: none !important;: Removes any borders from elements with the class "card."

  • box-shadow: Adds a box shadow to elements with the class "card" for a visual effect.

  • .card-header: Styles elements with the class "card-header."

  • color: white !important; background: #3366FF !important;: Sets text color to white and background color to blue for elements with the class "card-header."

  • .card-header > img: Styles images within elements with the class "card-header."

  • width: 180px;: Sets the width of these images to 180 pixels.

  • .input-container input: Styles input elements within elements with the class "input-container."

  • width: 40px; height: 40px;: Sets the width and height of these input elements to 40 pixels.

  • .form-control:focus: Styles focused form controls.

  • box-shadow: none !important; border: 1px solid #3366FF !important;: Removes box shadows and adds a blue border when these form controls are focused.

  • .verify-btn: Styles elements with the class "verify-btn."

  • border-radius: 20px !important; border: 0px !important; width: 140px; background-color: #3366FF !important;: Sets border radius, border, width, and background color for elements with the class "verify-btn."

Output:

Youtube Video:

It's simple to create OTP validation code using Bootstrap(Thanks to Bootstrap's ready-to-use classes). If you'd like a more detailed explanation of the code, we've created a video tutorial for your convenience.


Source Code:

We have put the code for this design here. If you want to get it, just click on the link below.

Read Also:

 

Comments

Post a Comment