JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<p>
  The custom-control in bootstrap 4beta3 (and previous betas?) has a padding-left of 1.5rem built in to account for radio/checkbox absolute positioned element.
</p>
<p>
  A minor issue with this is that it's not straightforward to create a custom checkbox with uniform spacing when no label is being used (empty label). See the 3rd table example below, where the blue square is using the whole
  padding (1.5rem) instead of 1rem to make a square.
</p>

<div>Custom Checkboxes in Bootstrap</div>

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="customCheck1">
          <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>2</td>
      <td>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="customCheck2">
          <label class="custom-control-label" for="customCheck2">Check this custom checkbox
            <br/>It takes up two lines</label>
       ...

SCSS

.custom-control {
  border: solid 1px blue;
  
  .custom-control-label:not(:empty) {
    border: solid 1px red;
  }
}

.custom-override {
  &.custom-control {
    padding-left: 1rem;
    
    .custom-control-label:not(:empty) {
      margin-left: 0.5rem;
    }
  }
}

.custom-override2 {
  display: flex;
  &.custom-control {
    padding-left: 0;
    .custom-control-label {
      display: flex;
      
      &::before {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 0.25rem;
      }
      
      &:not(:empty)::before {
        margin-right: 0.5rem;
      }
    }
  }
}