Bootstrap 4 Radio buttons

Bootstrap 4 Radio buttons form component

Bootstrap radio buttons are option buttons, which allows users to choose one of a predefined set of two or more options. Commonly used in forms and surveys.

Basic Bootstrap 4 version

Edit in sandbox 
        
            
      <!-- Default unchecked -->
      <div class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios">
        <label class="custom-control-label" for="defaultUnchecked">Default unchecked</label>
      </div>

      <!-- Default checked -->
      <div class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" id="defaultChecked" name="defaultExampleRadios" checked>
        <label class="custom-control-label" for="defaultChecked">Default checked</label>
      </div>

Above is an example template for Radio buttons in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

Edit in sandbox 
        
            
      <!-- Default radio -->
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"/>
        <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
      </div>

      <!-- Default checked radio -->
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked/>
        <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
      </div>