title: Bootstrap 4: Checkbox text on the left, checkbox on the right
body: <p>It seems simple, but I can't seem to figure it out. I have a checkbox with text, and I need the text to stand on the left, checkbox on the right. How can I do this?</p>
  
  <p>Here's my code:</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-css lang-css prettyprint-override"><code>.custom-control-description {
    color: #009fff;
    text-transform: uppercase;
  }
  .custom-checkbox .custom-control-indicator {
    border-radius: 0;
    border: 2px solid #cdc9ca;
    background: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  &lt;form&gt;
  &lt;div class="checkbox-wrap d-flex justify-content-end p-2 mb-2"&gt;
    &lt;label class="custom-control custom-checkbox"&gt;
      &lt;span class="custom-control-description"&gt;All Pages&lt;/span&gt;
    &lt;input type="checkbox" class="custom-control-input"&gt;
      &lt;span class="custom-control-indicator"&gt;&lt;/span&gt;
  &lt;/label&gt;
  &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>