Bootstrap implements horizontal arrangement of forms and bootstrap arrangement of forms

Bootstrap implements horizontal arrangement of forms and bootstrap arrangement of forms

By adding the. form-horizontal class to the form and using the grid class preset by Bootstrap, You Can horizontally layout the label and control group. In this way, the behavior of. form-group will be changed to row in the raster system, so no additional. row is required.

The horizontal form and other forms not only have different numbers of tags, but also have different forms. To create a horizontal layout form, follow these steps:

1. Add class. form-horizontal to the parent <form> element.
2. Place tags and controls in a <div> with class. form-group.
3. Add class. control-label to the label.

Implementation Code:

<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="form-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>  </div>  <div class="form-group">   <div class="col-sm-offset-2 col-sm-10">    <div class="checkbox">     <label>      <input type="checkbox"> Remember me     </label>    </div>   </div>  </div>  <div class="form-group">   <div class="col-sm-offset-2 col-sm-10">    <button type="submit" class="btn btn-default">Sign in</button>   </div>  </div> </form> 

If you want to learn more, click here to learn more and add a special topic: Bootstrap learning tutorial.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.