Bootstrap Forms


Bootstrap Forms : Bootstrap provides three types of forms -vertical, horizontal and inline. Based on your requirement you can easily create these forms. Generally creating a form in html and styling them using css is a boring task. Bootstrap forms comes with the rich form elements and well organised layout. You need only add classes to make them beautiful. Thus bootstrap has simplified our task by providing well defined classes for creating form. Here in this tutorial we are going to explain how you can create Forms in Bootstrap. You can also use our online
editor to edit and run the code online.


Bootstrap Forms Example

Bootstrap provides basically three types of forms as below :

1. Vertical Form
2. Horizontal Form
3. Inline Form

Now let us go one by one to understand the bootstrap forms-

Bootstrap Vertical Form

By Default bootstrap creates vertical form, this comes with the bootstrap’s default setting. For Creating bootstrap you need to add following css and role in form elements.

1 – Add Role : First Add Role(form) in Form tag –

<form role="form"></form>

2 – Add Form Group Wrapper –

            <form role="form">
              <div class="form-group">
              </div>
           </form>
          

3 – Add Form Input Element – Add .form-control class in form input fields.

           <form role="form">
              <div class="form-group">
                <label for="firstname">First Name</label>
                 <input type="text" name= "First Name" class="form-control" id="fname" placeholder="Enter First Name">
              </div>
           </form>
         

Note : By default bootstrap provides 100 % width of input fields

<form role="form">
    <div class="form-group">
        <label for="firstname">First Name</label>
        <input type="text" name= "First Name" class="form-control" id="fname"
               placeholder="Enter First Name">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="text" name="email" class="form-control" id="email"
               placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="Phone">Phone</label>
        <input type="text" name="phone" class="form-control" id="phone"
               placeholder="Enter Phone No">
    </div>
    <div class="form-group">
        <label for="Password">Password</label>
        <input type="password" name="password" class="form-control" id="password"
               placeholder="Enter Password">
    </div>
    <div class="form-group">
        <label for="Password">Confirm Password</label>
        <input type="password" name="confirmpassword" class="form-control" id="confirmpassword"
               placeholder="Enter Password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Try it »

Bootstrap Forms - Vertical

Bootstrap Horizontal Form

The predefined class .form-horizontal is used to create horizontal form in bootstrap. Additional class for label elements used is .control-label

1 – Add class .form-horizontal in tag <form> .

2 – Add Class .control-label in labels

Example of Horizontal form is –

<form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="firstname">First Name</label>
                            <div class="col-sm-10">
                                <input type="text" name= "First Name" class="form-control" id="fname" placeholder="Enter First Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="email">Email</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Phone">Phone</label>
                            <div class="col-sm-10">
                                <input type="text" name="phone" class="form-control" id="phone"  placeholder="Enter Phone No">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Password">Password</label>
                            <div class="col-sm-10">
                                <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Password">Confirm Password</label>
                            <div class="col-sm-10">
                                <input type="password" name="confirmpassword" class="form-control" id="confirmpassword"
                                       placeholder="Enter Password">
                            </div>
                        </div>
                        <div class="form-group">
                           <label class="control-label col-sm-2" for="Password">Submit </label>
                         <div class="col-sm-10">
                            <button type="submit" class="btn btn-primary">Submit</button>
                         </div>
                        </div>
     </form>

Try it »

The above code will produce the following result –

Bootstrap Forms - Horizontal

Bootstrap Inline Form

Bootstrap inline form are used when you need to display form’s all field in single line. The form class .form-inline is used to generate the inline form. The simple example can be search box with search button or login form in a single line.

<form role="form" class="form-inline">
                        <div class="form-group">
                            <label  for="username">Username</label>
                            
                                <input type="text" name= "username" class="form-control" id="uname" placeholder="Enter Username">
                            
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                           
                                <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
                            
                        </div>
                        
                        <div class="form-group">
                           <label  for="Password">Submit </label>
                            <button type="submit" class="btn btn-primary">Login</button>                        
                        </div>
     </form>

Try it »

The Above code will produce the following output-

Bootstrap Forms - Inline


User Ans/Comments

📖 Read More


Advertisements