Bootstrap _javascript tips for achieving horizontal arrangement of 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:

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

Implementation code:

<form class= "form-horizontal" role= "form" > <div class= "Form-group" > <label for= "inputEmail3" class= "C" Ol-sm-2 Control-label ">Email</label> <div class=" col-sm-10 "> <input type=" Email "class=" Form-cont  Rol "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" > <in Put type= "password" class= "Form-control" id= "inputPassword3" placeholder= "password" > </div> </div> & Lt;div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <div class= "checkbox" > <l abel> <input type= "checkbox" > Remember me </label> </div> </div> &LT;/DIV&G 
 T <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <button type= "Submit" class= "Btn BT N-default ">signin</button> </div> </div> </form>  

If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.