Bootstrap Form Layout

•  Individual form controls automatically receive some global styling. 
•  All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%. 
• Wrap labels and controls in .form-group for optimum spacing.
•  Includes support for all HTML5 types: datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
  

Bootstrap provides you with following types of form layouts: 

•  Vertical (default) form.
•  Inline form.
•  Horizontal form.

Vertical or basic form 

The basic form structure comes with Bootstrap; individual form controls automatically receive some global styling. 

To create a basic form do the following:

•   Add a role form to the parent <form> element. 
•  Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing. 
•  Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

<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-line Form:

• Makes a <form> left-aligned with inline-block controls. 
• This only applies to forms within viewports that are at least 768px wide.
•  In the above example, add the attribute class="form-inline". 

<form role="form" class="form-inline">

Note:  

•  Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set 
  a width on the form controls used within. 
•  Screen readers will have trouble with your forms if you don't include a label for every input. For these inline 
  forms, you can hide the labels using the .sr-only class. 

<form class="form-inline" role="form"> 

    <div class="form-group"> 

        <label class="sr-only" for="email2">Email address</label> 

        <input type="email" class="form-control" style="width:200px" id="email2" placeholder="Enter email"> 

    </div> 

    <div class="form-group"> 

        <label class="sr-only" for="password1">Password</label> 

        <input type="password" class="form-control" id="password1" placeholder="Password"> 

    </div> 

    <div class="checkbox"> 

        <label> 

            <input type="checkbox"> Remember me 

        </label> 

    </div> 

    <button type="submit" class="btn btn-default">Sign in</button> 

</form>  

Horizontal Form: We can use Bootstrap's predefined grid classes to Aligns labels and groups of form controls in a horizontal layout. 

Note: The class .form-groups behaves as grid rows, so no need for .row. 

<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>  

Rendering of Checkbox and Radio 

By default all checkbox and radio buttons are rendered vertical.  

To show them in-line use the attribute: checkbox-inline or radio-inline 

<form class="form-horizontal" role="form"> 

    <div class="checkbox"> 

        <label><input type="checkbox" value="">Option 1</label> 

    </div> 

    <div class="checkbox disabled"> 

        <label><input type="checkbox" value="">Option 2</label> 

    </div> 

    <div class="checkbox"> 

        <label><input type="checkbox" value="">Option 3</label> 

    </div> 

    <div> 

        <label class="checkbox-inline"> 

            <input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1 

        </label> 

        <label class="checkbox-inline"> 

<input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2 

        </label> 

        <label class="checkbox-inline"> 

            <input type="checkbox" id="inlineCheckbox3" value="option3"> Option 3 

        </label> 

    </div> 

</form>  

Use the class .form-control-static on a <p>, when you need to place plain text next to a form label within a 

horizontal form. 

<label class="col-sm-2 control-label">Email</label> 

<div class="col-sm-10"> 

    <p class="form-control-static">email@example.com</p> 

</div> 

Validation States: 

To use, simply add the appropriate class (.has-warning, .has-error, or .has-success) to the parent element

<div class="form-group has-success"> 

    <label for="inputSuccess"> 

        Input with success 

    </label> 

    <div> 

        <input type="text" class="form-control" id="inputSuccess"> 

    </div> 

</div>  

Disabled inputs and fieldsets: 

<form role="form"> 

    <fieldset disabled > 

        <div class="form-group"> 

            <label for="t1">Disabled input</label> 

            <input type="text" id="t1" class="form-control" placeholder="Disabled input"> 

        </div> 

        <div class="form-group"> 

            <label for="s1">Disabled select menu</label> 

 <select id="s1" class="form-control"> 

                <option>Disabled select</option> 

            </select> 

        </div> 

        <div class="checkbox"> 

            <label> 

                <input type="checkbox"> Can't check this 

            </label> 

        </div> 

        <button type="submit" class="btn btn-primary">Submit</button> 

    </fieldset> 

</form>

Control Height Sizing: Set heights using classes like .input-lg 

<form role="form"> 

     <input class="form-control input-lg" type="text" placeholder=".input-lg"> 

     <input class="form-control" type="text" placeholder="Default input"> 

     <input class="form-control input-sm" type="text" placeholder=".input-sm"> 

 </form>  

Control Width Sizing: set widths using grid column classes like .col-sm-*. 

<form role="form" class="form-horizontal"> 

    <div class="row"> 

        <div class="col-sm-2"> 

            <input type="text" class="form-control" placeholder=".col-sm-2"> 

        </div> 

        <div class="col-sm-3"> 

            <input type="text" class="form-control" placeholder=".col-sm-3"> 

        </div> 

        <div class="col-sm-4"> 

            <input type="text" class="form-control" placeholder=".col-sm-4"> 

        </div> 

    </div> 

</form>