Creating Forms with Bootstrap

HTML structures will be the vital little bit of the website pages, however styling the structure controls physically 1 by 1 utilizing CSS could be a repetitive procedure. Bootstrap significantly disentangles the styling procedure of structure controls like information boxes, select boxes, content ranges, and so on.

Bootstrap provides three different types of form layouts :

1. Vertical Form (default form layout)
2. Horizontal Form
3. Inline Form

Creating Vertical Form Layout

This is actually the default Bootstrap structure design by which styles are linked to shape controls without adding any base class to the component or any expansive changes in the markup. 

The structure controls in this design are stacked with left-adjusted marks on the top.

Example Code :

<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>

Vertical Form Design

Creating Horizontal Form Layout

In horizontal form layout labels are right aligned and floated to left to create them appear on a single line as form controls. The horizontal form layout requires the many markup changes from the default form layout. Steps to achieve this layout are listed below :

• Add the class .form-horizontal to the element.
• Wrap labels and form controls in a
• element and apply the class .form-group.
• Use Bootstrap's predefined grid classes to align labels and form controls.
• Add the class .control-label to the element.

Example Code :

<form class="form-horizontal">

<div class="form-group">

<label for="inputEmail" class="control-label col-xs-2">Email</label>

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

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

</div>

</div>

<div class="form-group">

<label for="inputPassword" class="control-label col-xs-2">Password</label>

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

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

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

<div class="checkbox">

<label><input type="checkbox"> Remember me</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

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

</div>

</div>

</form>

The output of example will look something like this :

Creating Inline Form Layout

Sometimes you might require to position the appropriate execution controls side-by-side to compact the layout. You can certainly do this easily with the addition of the Bootstrap class .form-incline to the element.

Example Code :

<form class="form-inline">

<div class="form-group">

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

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

</div>

<div class="form-group">

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

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

</div>

<div class="checkbox">

<label><input type="checkbox"> Remember me</label>

</div>

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

</form>

The output of example will look something like this :