Explain the steps for creating basic or vertical forms using Bootstrap
Last Updated :
05 Jun, 2023
Bootstrap is an open-source CSS framework that is used for building responsive websites. It has HTML, CSS, and JS frameworks 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 collections 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 form templates in Bootstrap has made it easy and we can directly use form templates from Bootstrap. Both the latest versions of Bootstrap have form templates included in them. The major difference between both versions is that Bootstrap 5 has a dedicated section of forms while in version 4 the form is included in the component section. Thus it’s 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.
HTML
//filename:index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet"
integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<script src=
integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
crossorigin="anonymous">
</script>
<title>gfg</title>
</head>
<body>
<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, a 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, and along with that submit button would also be seen. We would start with the starter template and put the form code into the body tag and the output could be seen.
HTML
//filename:index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<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>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...