Bootstrap Horizontal Form

You can create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.

Also, add .col-form-label to the <label> element as well so they are vertically centered with their associated form controls.

At times, you maybe need to use margin or padding utilities to create that perfect alignment you need.

For example,

<form>
 <div class="row mb-3">
  <label for="email" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="email">
  </div>
 </div>
 <button type="submit" class="btn btn-primary">Sign in</button>
</form>