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 class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">

<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>

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

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.