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 |
No comments:
Post a Comment