Radio

To create a custom radio button, wrap a container element, with a class of .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the input with type="radio".

Checkbox with label

Checkbox without label

        
Checkbox with label
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input">
  <span class="custom-control-label">Normal </span>
</label>
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input" checked="">
  <span class="custom-control-label">Checked</span>
</label>
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input" disabled="">
  <span class="custom-control-label">Disabled Normal</span>
</label>
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input" disabled="" checked="">
  <span class="custom-control-label">Disabled Checked</span>
</label>


Checkbox without label
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input">
  <span class="custom-control-label"></span>
</label>
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input" checked="">
  <span class="custom-control-label"></span>
</label>
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input" disabled="">
  <span class="custom-control-label"></span>
</label>
<label class="custom-control custom-radio">
  <input type="radio"  class="custom-control-input disabled" disabled="" checked="">
  <span class="custom-control-label"></span>
</label>