Do you use the CSS class "form horizontal" to arrange your fields and labels?

Last updated by Tiago Araújo [SSW] 4 months ago.See history

This rule has been archived
Archived Reason: The class no-longer exists in Bootstrap 4

You should align labels next to the inputs on medium and large displays and above inputs on small and extra-small displays.

Bootstrap makes this easy. Use the css class form-horizontal on your html form for it to use this behaviour by default.

<form class="form-horizontal">
  <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>
</form>

Figure: Example html using Bootstrap to get the above behaviour

See https://getbootstrap.com/docs/3.4/css/#forms-horizontal for more information.

We open source. Powered by GitHub