Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain the steps for creating basic or vertical forms using Bootstrap

  • Difficulty Level : Medium
  • Last Updated : 21 Sep, 2021

Bootstrap is an open-source CSS framework that is used for building responsive websites. It has HTML, CSS, JS framework for developing user friendly and responsive websites. As of August 2021, Bootstrap is the tenth most starred project on Github. The website has ready-made templates given along with their output, so that we can select the template as per the requirements. This open source was started by Mark Otto, and Jacob Thornton and it was initially known as Twitter blueprint. Thus bootstrap has made web developers lives easy due to all major collection of bootstrap and ready to use basic templates. 

Forms in Bootstrap: Forms are the most needed template and integral part of each website used either for sign up, login, feedback etc. Thus the availability of forms templates in bootstrap has made it easy and we can directly use form template from bootstrap. Both the latest versions of bootstrap has forms template included in them. The major difference between both versions is that bootstrap 5 has dedicated section of forms while in version 4 the form is included in component section. Thus its highly recommended to go for version 5.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Example 1: In this example, we will see how to create a vertical form using Bootstrap 4.

Step 1: Include the following CDN links in the code in order to use Bootstrap 4.



 

<!– Bootstrap CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>

<!– Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js” integrity=
“sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”></script>

Step 2: Now we will use bootstrap 4 forms with the input fields we want in the forms inside the body tag. 

index.html




<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href=
         rel="stylesheet" 
         integrity=
 "sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" 
         crossorigin="anonymous">
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script src=
         integrity=
 "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" 
         crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <script src=
         integrity=
 "sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
         crossorigin="anonymous"></script>
      <script src=
         integrity=
 "sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" 
         crossorigin="anonymous"></script>
      <title>gfg</title>
   </head>
   <body>
      <!-- code for the form-->
      <form>
         <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" 
                   class="form-control" 
                   id="exampleInputEmail1" 
                   aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">
            We'll never share your email with anyone else.</small>
         </div>
         <div class="form-group">
            <label for="exampleInputPassword1">
              Password
           </label>
            <input type="password" 
                   class="form-control" 
                   id="exampleInputPassword1">
         </div>
         <div class="form-group form-check">
            <input type="checkbox" 
                   class="form-check-input"
                   id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">
              Check me out
           </label>
         </div>
         <button type="submit" class="btn btn-primary">Submit</button>
      </form>
   </body>
</html>

Output:

Output  form 

 

Example 2: In this example, the similar form is generated or can be seen in output as that of bootstrap 4 but some steps would differ. Now we will use bootstrap 5. The form can input email and password, along with that submit button would also be seen. We would start with the starter template and put the form code into body tag and the output could be seen.

index.html




<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href=
         rel="stylesheet" 
         integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous">
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script src=
         integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
         crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <script src=
         integrity=
"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
         crossorigin="anonymous"></script>
      <script src=
         integrity=
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 
         crossorigin="anonymous"></script>
      <title>gfg</title>
   </head>
   <body>
      <!--code for the form-->
      <form>
         <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">
              Email address
           </label>
            <input type="email"
                   class="form-control"
                   id="exampleInputEmail1" 
                   aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">
               We'll never share your email with anyone else.
            </div>
         </div>
         <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">
              Password
           </label>
           <input type="password" 
                  class="form-control" 
                  id="exampleInputPassword1">
         </div>
         <div class="mb-3 form-check">
            <input type="checkbox" 
                   class="form-check-input" 
                   id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">
              Check me out
           </label>
         </div>
         <button type="submit" class="btn btn-primary">Submit</button>
      </form>
   </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!