Create responsive website with Bootstrap

Bootstrap Forms

In Bootstrap, there are three types of form layouts

• Vertical form (this is default)
• Horizontal form
• Inline form

Standard rules for all three form layouts:

• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements

Bootstrap Vertical Form (default)

The basic form structure comes with Bootstrap; individual form controls automatically receive some global styling. To create a basic form do the following :

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

Bootstrap Inline Form

In Bootstrap Inline forms, all elements are inline, left-aligned, and the labels are alongside.

Bootstrap Horizontal Form

To create a form that uses the horizontal layout, do the following :

• Add a class of .form-horizontal to the parent <form> element.
• Wrap labels and controls in a <div> with class .form-group.
• Add a class of .control-label to the labels.