How to create a vertical or basic form using Bootstrap ?

Last Updated : 05 Jun, 2023

Forms are used on almost every website that you visit. It is generally used to collect data from the users. It consists of various interactive controls that enable users to input the data. These controls are wrapped in the <form> tag and also can be designed or styled according to the need by setting different attributes of the controls, to different values.

Some of the major form controls are:

Text Fields: They are single-lined fields, allowing to input of text of a single line only.
Password Fields: They are special text fields, which represent special characters such as an asterisk or a bullet, instead of what the user types.
Textarea: They are multi-lined fields, allowing to input of text of multiple lines.
Checkboxes: Checkboxes enable you to select multiple options from a number of choices.
Radio Buttons: Radio buttons are also used to select from a number of choices but here, only one button can be selected at a time.
Submit Buttons: It is a button used for the submission of the form data, entered by the user.

They can be integrated into the forms as per the requirements.

Bootstrap provides the following 3 types of form layouts :

Vertical Forms (Default)
Horizontal Forms
Inline Forms

In this article, we will be learning to create the basic vertical forms.

How to create vertical or basic form in bootstrap?

To include this form into your website by making use of bootstrap, you just need to include the following jquery and bootstrap libraries, as scripts in your HTML code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Include the following stylesheet link of the bootstrap in the head of the HTML document, which will enable us to use various classes of bootstrap for styling the form and its controls.

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

Include <form> tag in the body of the code for creating the form and to wrap all the form controls you want to include in your form.

<form>     <div class="form-group">         <label>User Name</label>         <input class="form-control"              type="text"              placeholder="Enter your User Name">     </div>      <div class="form-group">         <label>Password</label>         <input class="form-control"              type="password"              placeholder="Enter your password">     </div> </form>

Here,

<label> tag is used to include the label form-control.
class="form-group" is used to adjust the spacing between the various form controls.
class="form-control" is used to style the form controls, like their appearance.

Example 1: In this example, we are creating vertical forms using Bootstrap.

HTML

<!DOCTYPE html> <html> <head>     <title>Vertical forms Example</title>     <link rel="stylesheet"            href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script>     <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">     </script> </head>  <body>     <div class="container" style="color:green">         <h1>GeeksforGeeks</h1>     </div>     <div class="container">         <h4>Vertical Form -> Example:1</h4>         <form>             <div class="form-group">                 <label>User Name</label>                 <input class="form-control" type="text"                         placeholder="Enter your User Name">             </div>             <div class="form-group">                 <label>Password</label>                 <input class="form-control" type="password"                         placeholder="Enter your password">             </div>             <div class="container">                 <button type="button" class="btn btn-success">                     Login                 </button>                 <button type="button" class="btn btn-secondary">                     Register                 </button>             </div>         </form>     </div> </body> </html>

Output:

As you can see in the output, a basic form is created, having interactive form controls i.e. two labels, one text field, and one password field to enter the data i.e. name and password, and 2 buttons i.e. login and register.

Example 2: In this example, we have created more options in the vertical form.

HTML

<!DOCTYPE html> <html> <head>     <title>Vertical forms Example</title>     <link rel="stylesheet"            href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script>     <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">     </script> </head>  <body>     <div class="container" style="color:green">         <h1>GeeksforGeeks</h1>     </div>     <div class="container">         <h4>Vertical Form -> Example:2</h4>         <form>             <div class="form-group">                 <label>Name</label>                 <input class="form-control" type="text"                         placeholder="Enter your Name">             </div>              <div class="form-group">                 <label>Gender</label>                 <div class="form-check">                     <input class="form-check-input" type="radio"                             name="exampleRadios" id="exampleRadios1"                            value="option1" checked>                     <label class="form-check-label" for="exampleRadios1">                         Male                     </label>                 </div>                  <div class="form-check">                     <input class="form-check-input" type="radio"                             name="exampleRadios" id="exampleRadios1"                            value="option1" checked>                     <label class="form-check-label" for="exampleRadios1">                         Female                     </label>                 </div>                 <div class="form-check">                     <input class="form-check-input" type="radio"                             name="exampleRadios" id="exampleRadios1"                            value="option1" checked>                     <label class="form-check-label" for="exampleRadios1">                         Others                     </label>                 </div>             </div>             <div class="form-group">                 <label>Skills</label>                 <div class="form-check">                     <input class="form-check-input" type="checkbox"                             value="" id="defaultCheck1">                     <label class="form-check-label" for="defaultCheck1">                         Web Development                     </label>                 </div>                 <div class="form-check">                     <input class="form-check-input" type="checkbox"                             value="" id="defaultCheck1">                     <label class="form-check-label" for="defaultCheck1">                         Android Development                     </label>                 </div>                 <div class="form-check">                     <input class="form-check-input" type="checkbox"                             value="" id="defaultCheck1">                     <label class="form-check-label" for="defaultCheck1">                         DSA                     </label>                 </div>             </div>             <div class="container">                 <button type="button" class="btn btn-success">                     Submit                 </button>                 <button type="button" class="btn btn-secondary">                     Clear                 </button>             </div>         </form>     </div> </body> </html>

Output:

In this output form, radio buttons are included, enabling or forcing the user to choose only one gender option from the list and Checkboxes are also introduced, enabling the user to select multiple skills and that too in a vertical form(default).

Explain the steps for creating basic or vertical forms using Bootstrap

bhawnaatrish

Improve

Article Tags :

How to create a vertical or basic form using Bootstrap ?

Similar Reads