Bootstrap Horizontal Form __ Notes

horizontally arranged forms

By adding the. Form-horizontal class to the form and combining the grid classes with the Bootstrap preset, you can lay out the label label and the group of controls side by level. Doing so will change the behavior of the. Form-group so that it behaves as a row in a grid system, so there is no need to add additional. Row.

A horizontal form differs from the number of other forms that are not labeled, and forms are rendered differently. To create a form that is horizontally laid out, follow these steps:

Adds class. Form-horizontal to the parent <form> element.
Put the labels and controls in a <div> with class. Form-group.
Add Class. Control-label to the label.

<form class= "form-horizontal" role= "form" > <div class= "Form-group" > <label for= "inputEmail3" class= "Col-sm-2 Control-label" >Email</label> <div class= "col-sm-10" > <input type= "Email" class= "fo 
    Rm-control "id=" InputEmail3 "placeholder=" Email "> </div> </div> <div class=" Form-group "> <label for= "InputPassword3" class= "col-sm-2 control-label" >Password</label> <div class= "col-sm-10" > <input type= "password" class= "Form-control" id= "inputPassword3" placeholder= "password" > </div&gt 
  ; </div> <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <div class= "ch Eckbox "> <label> <input type=" checkbox "> Remember me </label> ;/div> </div> </div> <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-1 0 "> <bUtton type= "Submit" class= "btn btn-default" >sign in</button> </div> </div> </form>