Introducing Bootstrap Forms

In this post we are going to discuss about bootstrap forms and how easy is to create forms using Bootstrap. Bootstrap offers great support for collecting information from users, as well as providing feedback. You can create forms by adding the appropriate classes and HTML structure to your pages.

Bootstrap provides you with Vertical Form, Inline Form and Horizontal Form. By default, forms in Bootstrap are displayed vertically.

Creating Form Example

Step 1 : Creating the form element. The first step of creating form in bootstrap is to add a form element. By default it will be vertical form. If you want your form to be horizontal or inline you need to add class form-horizontal and form-inline respectively.

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

Step 2 : Creating rows for the form content. Next step is to add a form-group which tells Bootstrap that the controls inside that section are a group of controls for the form.

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

Step 3 : Adding label and input control. Add label control by using label attribute and input control by input attribute. You also need to add control-label class so that bootstrap can recognize it as a form label. Input control should have form-control class for it to be recognized by Bootstrap.

<label for="name" class="control-label col-md-3">Name :</label>
<input type="text" name="name" id="name" class="form-control" />

Code of Vertical Form

<form role="form">
  <div class="form-group">
    <label for="fname" class="control-label">First Name :</label>
    <input type="text" name="fname" id="fname" class="form-control" />
  </div>
  <div class="form-group">
    <label for="lname" class="control-label">Last Name :</label>
    <input type="text" name="lname" id="lname" class="form-control" />
  </div>
</form>

Result :

Code of Inline Form

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="fname" class="control-label">First Name :</label>
    <input type="text" name="fname" id="fname" class="form-control" />
  </div>
  <div class="form-group">
    <label for="lname" class="control-label">Last Name :</label>
    <input type="text" name="lname" id="lname" class="form-control" />
  </div>
</form>

Result:

Code of Horizontal Form

<form class="horizontal" role="form">
  <div class="form-group">
    <label for="fname" class="control-label col-md-3">First Name :</label>
    <div class="col-md-3">
      <input type="text" name="fname" id="fname" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <label for="lname" class="control-label col-md-3">Last Name :</label>
    <div class="col-md-3">
      <input type="text" name="lname" id="lname" class="form-control" />
    </div>
  </div>
</form>

Result:

Please Like and Share the Blog, if you find it interesting and helpful.

Related articles

• Introducing Navbar in Bootstrap - Part 1 
• Introducing Navbar in Bootstrap - Part 2 
• Enhance Data Display using Tabs in Bootstrap 
• Enhance Data Display using Scrollspy in Bootstrap 
• Getting Started with BootStrap 
• Little about BootStrap Classes 
• Control Content Placement in Bootstrap 
• Controlling Visibility in BootStrap 
• Introducing BootStrap Grid System 
• Integrate Colorbox in Asp Net Web Application