Creating Forms with Bootstrap1.docx

Creating Forms with Bootstrap1.docx - Creating Forms with...

Info icon This preview shows pages 1–4. Sign up to view the full content.

View Full Document Right Arrow Icon
Creating Forms with Bootstrap HTML forms are the integral part of the web pages and applications, but styling the form  controls manually one by one with CSS are often boring and tedious. Bootstrap greatly  simplifies the process of styling and alignment of form controls like labels, input fields,  selectboxes, textareas, buttons, etc. through predefined set of classes. Bootstrap provides three different types of form layouts: Vertical Form (default form layout) Horizontal Form Inline Form The following section will give you the detailed overview of these form layouts as well as the various form related Bootstrap components one by one. Creating Vertical Form Layout This is the default Bootstrap form layout in which styles are applied to form controls without  adding any base class to the  <form>  element or any large changes in the markup. The form controls in this layout are stacked with left-aligned labels on the top. Example <form> <div class = "form-group" > <label for = "inputEmail" > Email </label> <input type = "email" class = "form-control" id = "inputEmail" placeholder = "Email" > </div> <div class = "form-group" > <label for = "inputPassword" > Password </label> <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password" > </div> <div class = "checkbox" > <label><input type = "checkbox" > Remember me </label> </div> <button type = "submit" class = "btn btn-primary" > Login </button> </form> — The output of the above example will look something like this:
Image of page 1

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Note: In Bootstrap 3 all textual elements like <input> , <textarea> , and <select> with the class .form-control are 100% wide by default. To use them inline, you'll have to set a width on the element the form controls used within. Creating Horizontal Form Layout In horizontal form layout labels are right aligned and floated to left to make them appear on  the same line as form controls. The horizontal form layout requires the various markup  changes from a default form layout. Steps to achieve this layout are listed below: Add the class .form-horizontal to the <form> element. Wrap labels and form controls in a <div> element and apply the class .form-group . Use Bootstrap's predefined grid classes to align labels and form controls. Add the class .control-label to the <label> element. Example <form class = "form-horizontal" > <div class = "form-group" > <label for = "inputEmail" class = "control-label col-xs-2" > Email </label> <div class = "col-xs-10" > <input type = "email" class = "form-control" id = "inputEmail" placeholder = "Email" > </div> </div> <div class = "form-group" > <label for = "inputPassword" class = "control-label col-xs-2" > Password </label> <div class = "col-xs-10" > <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password" > </div>
Image of page 2
</div> <div class = "form-group" > <div class = "col-xs-offset-2 col-xs-10" > <div class = "checkbox" > <label><input type = "checkbox" >
Image of page 3

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Image of page 4
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern