Bootstrap Form
There are three types of form layouts in bootstrap. They are:
- Vertical form (default)
- Inline form
- Horizontal form
Vertical form (default)
It is the default form layout of bootstrap. To use a form you have to do following:
- Use role="form" into the <form> tag.
- Add a <div> tag with .form-group class and wrap labels and form controls in the <div> tag.
- Use .form-control class to all textual <input>, <textarea>, and <select> elements.
Example:
<form role="form">
<div class="form-group">
<label for="name"> Name: </label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="password"> Password: </label>
<input type="password" class="form-control" id="pass">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
<div class="form-group">
<label for="name"> Name: </label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="password"> Password: </label>
<input type="password" class="form-control" id="pass">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
Run Example
Inline form
To create an inline form you have to use .form-inline class. In an inline form the elements are inline, left aligned and the labels are alongside. You can use this forms within the viewports that are at least 768px wide.
Example:
<form class="form-inline" role="form">
<div class="form-group">
<label for="name"> Name: </label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="password"> Password: </label>
<input type="password" class="form-control" id="pass">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
<div class="form-group">
<label for="name"> Name: </label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="password"> Password: </label>
<input type="password" class="form-control" id="pass">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
Run Example
You can hide the labels of the inline forms by using the class. You should use placeholder class inside the <input> tags.
Example:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name"> Name: </label>
<input type="text" class="form-control" id="name" placeholder="Your name">
</div>
<div class="form-group">
<label class="sr-only" for="password"> Password: </label>
<input type="password" class="form-control" id="pass" placeholder="Your password">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
<div class="form-group">
<label class="sr-only" for="name"> Name: </label>
<input type="text" class="form-control" id="name" placeholder="Your name">
</div>
<div class="form-group">
<label class="sr-only" for="password"> Password: </label>
<input type="password" class="form-control" id="pass" placeholder="Your password">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
Run Example
Horizontal form
To create an horizontal form you have to use .form-horizontal class. It means the labels are aligned next to the input field. It will transform to a vertical form on the small screen. You should also add .control-label class inside the <label> tag.
Example:
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label" for="name"> Name: </label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label class="control-label" for="password"> Password: </label>
<input type="password" class="form-control" id="pass">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
<div class="form-group">
<label class="control-label" for="name"> Name: </label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label class="control-label" for="password"> Password: </label>
<input type="password" class="form-control" id="pass">
</div>
<button type="submit" class="btn btn-primary"> Submit </button>
</form>
Run Example