Bootstrap 4: Checkbox text on the left, checkbox on the right

Question

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?

Here's my code:

.custom-control-description {
  color: #009fff;
  text-transform: uppercase;
}
.custom-checkbox .custom-control-indicator {
  border-radius: 0;
  border: 2px solid #cdc9ca;
  background: #fff;
}

<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">
<form>
<div class="checkbox-wrap d-flex justify-content-end p-2 mb-2">
  <label class="custom-control custom-checkbox">
    <span class="custom-control-description">All Pages</span>
  <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
</label>
</div>
</form>

Answer 1

Add position attribute to the styling of custom-control-indicator.

 .custom-checkbox .custom-control-indicator {
    position: relative;
    border-radius: 0;
    border: 2px solid #cdc9ca;
    background: #fff;
 }