Bootstrap - Form Demo

Form Layout

Bootstrap provides you with following types of form layouts −

• Vertical (default) form
• In-line form
• Horizontal form

Vertical or Basic Form

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.

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

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 <div> with class .form-group.

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