Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing forms using bootstrap.

Objectives and Outcomes

We will study how to create forms with ease using Bootstrap. Bootstrap makes it easy with the simple HTML markup and extended classes for different styles of forms.

Bootstrap provides you with following types of form layouts:
1) Vertical form (default)
2) Horizontal form
3) Inline form


Bootstrap Vertical Form

We will now add a simple form to the web page. Start by adding the following code to the body.

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

In above, we added a role form to the parent <form> element and wrapped labels and controls in a <div> with class form-group. This is needed for optimum spacing. We also added a class of form-control to all textual input elements.




Bootstrap Horizontal Form

Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the form

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:
    </label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:
    </label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me
	</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit
      </button>
    </div>
  </div>
</form>





Bootstrap Inline Form

To create a form where all of the elements are inline, left aligned and labels are alongside, add the class form-inline to the <form> tag.

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

By default Inputs, selects, and textareas have 100% width in Bootstrap. You need to set a width on the form controls when using inline form. Using the class sr-only you can hide the labels of the inline forms.

A complete bootstrap form

<form class="form-horizontal" role="form">
<div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">First Name</label>                        
	    <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name">
            </div>
</div>
		
<div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter Last Name">
            </div>
</div>            
					
<div class="form-group">
		<label for="telnum" class="col-xs-12 col-sm-2 control-label">Contact Tel.</label>
		<div class="col-xs-5 col-sm-4 col-md-3">
		<div class="input-group">
		<div class="input-group-addon">(</div>
		<input type="tel" class="form-control" id="areacode" name="areacode" placeholder="Area code">
		<div class="input-group-addon">)</div>
		</div>
		</div>
		<div class="col-xs-7 col-sm-6 col-md-7">
		<input type="tel" class="form-control" id="telnum" name="telnum" placeholder="Tel. number">
		</div>
</div>

<div class="form-group">
        <label for="emailid" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
        <input type="email" class="form-control" id="emailid" name="emailid" placeholder="Email">
        </div>
</div>
					
<div class="form-group">
      <div class="checkbox col-sm-5 col-sm-offset-2">
           <label class="checkbox-inline">
               <input type="checkbox" name="approve" value="">
               <strong>May we contact you?</strong>
           </label>
      </div>
      <div class="col-sm-3 col-sm-offset-1">
           <select class="form-control">
                <option>Tel.</option>
                <option>Email</option>
           </select>
      </div>
</div>
					
<div class="form-group">
	      <label for="feedback" class="col-sm-2 control-label">Your Feedback</label>
              <div class="col-sm-10">
                  <textarea class="form-control" id="feedback" name="feedback" rows="6"></textarea>
              </div>
</div>
					
<div class="form-group">
           <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary">Send Feedback</button>
           </div>
</div>
 
</form>
(
)