Blog

In this guide, we will discuss Form Demo in Bootstrap.

Form Layout

Bootstrap provides you with the 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.

Example	Description
Login Page	This example indicates about login page structure in Bootstrap
Contact page	This example indicates about Contact page structure in Bootstrap
Sign Up page	This example indicates about Sign Up page structure in Bootstrap

Next Topic : Click Here