Explain the steps for creating basic or vertical forms using Bootstrap

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.
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= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"         rel="stylesheet"          integrity= "sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"          crossorigin="anonymous">      <!-- Optional JavaScript; choose one of the two! -->      <!-- Option 1: Bootstrap Bundle with Popper -->      <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>      <!-- Option 2: Separate Popper and Bootstrap JS -->      <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"          integrity= "sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"         crossorigin="anonymous"></script>      <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"          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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"          rel="stylesheet"          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"         crossorigin="anonymous">      <!-- Optional JavaScript; choose one of the two! -->      <!-- Option 1: Bootstrap Bundle with Popper -->      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"         integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"          crossorigin="anonymous"></script>      <!-- Option 2: Separate Popper and Bootstrap JS -->      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"          integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"          crossorigin="anonymous"></script>      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"          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:
Blogathon-2021
Bootstrap-Questions
HTML-Questions
Picked
Blogathon
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
Python program to convert XML to Dictionary
Shared ViewModel in Android
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to align navbar items to the right in Bootstrap 4 ?