How To Create Forms Using Bootstrap

Bootstrap makes it easy to style different types of forms with the simple HTML markup and extended classes. Bootstrap provides three types of form layouts:

1. Vertical form (default)
2. In-line form
3. Horizontal form

<form role = "form">

 <div class = "form-group">
 <label for = "name">Name</label>
 <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
 </div>
 
 <div class = "form-group">
 <label for = "inputfile">File input</label>
 <input type = "file" id = "inputfile">
 </div>
 
 <div class = "checkbox">
 <label><input type = "checkbox"> Check me out</label>
 </div>
 
 <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Basic Form

To create a basic form, you need to do the following:

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

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.

Horizontal Form

To create horizontal form, add class .form-horizontal to the <form> element. Also, add class .control-label to all <label> elements.