Bootstrap Forms, Bootstrap Contact form, Bootstrap Form Layouts, Stacked Form, Bootstrap Inline Form, How To Create forms in Bootstrap, Bootstrap Vertical Form, Bootstrap Horizontal Form

Bootstrap Forms

So now we came on next step of bootstrap is bootstrap forms, every web designer need contact form or feedback form or any other kind form according their requirement.
In Bootstrap Form control automatically get some styling with bootstrap. In Bootstrap all textual like <input>, <textarea> or <select> html elements with bootstrap class .form-control have 100% width.

Bootstrap Form Layouts

Basically Bootstrap provide two type of form layouts
1. Stacked Form (Full-width Form)
2. Inline Form

Stacked Form

Stack Form basically like horizontal form in stacked form every <input> or <textarea> html elements came under one by one.

Example:- 

<form action="/action_page.php">
    <div class="form-group">
      <label for="email">Name:</label>
      <input type="email" class="form-control" id="name" placeholder="Enter Name" name="name">
    </div>
    <div class="form-group">
     <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
   <button type="submit" class="btn btn-primary">Submit</button>     
  </form>

Bootstrap Inline Form

In inline form all html element likes <input>, <textarea> etc. are inline and aligned left. To create inline form you have to add .form-inline class into <form> element.

Example:- 

<form class="form-inline" action="/action_page.php">
  <label for="name">Name:</label>
  <input type="name" class="form-control" id="phone">
  <label for="email">Email:</label>
  <input type="email" class="form-control" id="email">  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>