title: Bootstrap 4 Checkbox is not aligning correctly
body: <p>I have a  form inside  which I have several input fields and one checkbox</p>
  
  <ul>
  <li>I am trying to align the input fields in one rows but its is not happening</li>
  <li>I am aligning checkbox next to input field </li>
  <li>I want to align in a way so that it should appear good on each device as I am using bootstrap</li>
  <li>I am using <code>class=form-control</code> but still not getting the perfect alignment </li>
  </ul>
  
  <p><strong>Snippet</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet"
   href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"&gt;
  &lt;div class="container form-group"&gt;
    &lt;form id="changePasswordForm"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;label for="distributorName" id="commonHeader"&gt;Distributor
        Name:&lt;/label&gt;
          &lt;select id="distributorName" class="form-control test"&gt;
  
          &lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-3"&gt;
          &lt;label for="userCode" id="commonHeader"&gt;User Code:&lt;/label&gt; &lt;input type="text" id="userCode" name="usercode" class="form-control commonClass" placeholder="user Code" readonly="readonly"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;label for="userName" id="commonHeader"&gt;Name of the User:&lt;/label&gt; &lt;input type="text" id="userName" name="userName" class="form-control commonClass" placeholder="User Name"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;label for="loginId" id="commonHeader"&gt;login Id:&lt;/label&gt; &lt;input type="text" id="loginId" name="loginid" class="form-control commonClass" placeholder="Login Id"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;label for="Pass" id="commonHeader"&gt;Password:&lt;/label&gt; &lt;input type="password" id="Pass" name="pass" class="form-control commonClass" placeholder="Password" required="required"&gt;
          &lt;button type="button" class="eye-button" onclick="show('newPass')" id="display1"&gt;
        &lt;i class="fa fa-eye"&gt;&lt;/i&gt;
       &lt;/button&gt;
  
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;label for="userRole" id="commonHeader"&gt;Role&lt;/label&gt;
          &lt;select id="userRole" class="form-control test"&gt;
  
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-3"&gt;
          &lt;label for="checkbox" id="commonHeader"&gt;Active
         &lt;/label&gt; &lt;input type="checkbox" id="active" class="form-control commonClass"&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
        &lt;hr&gt;
  
        &lt;button type="submit" id="save" class="commonButton"&gt;
        &lt;i class="fa fa-save"&gt;&lt;/i&gt;save
       &lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>