Bootstrap - Form Demo
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.
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 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.
|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|