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

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>