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.

Examples	Description	Download link
Login Page	This example indicates about login page structure in Bootstrap	Download
Contact page	This example indicates about Contact page structure in Bootstrap	Download
Sign Up page	This example indicates about Sign Up page structure in Bootstrap	Download