Bootstrap - Form Demo

Form Layout

Bootstrap provides you with following types of form layouts −

Vertical (default) form

In-pne form

Horizontal form

Vertical or Basic Form

The basic form structure comes with Bootstrap; inspanidual form controls automatically receive some global stypng. To create a basic form do the following −

Add a role form to the parent <form> element.

Wrap labels and controls in a <span> with class .form-group. This is needed for optimum spacing.

Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

Inpne Form

To create a form where all of the elements are inpne, left apgned and labels are alongside, add the class .form-inpne to the <form> tag.

Horizontal Form

Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the 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 <span> with class .form-group.

Add a class of .control-label to the labels.