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 |