How to change bootstrap checkbox size

The best way to change the bootstrap checkbox size in CSS is by using the scale property.

        
            
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkbox-1" checked/>
            <label class="form-check-label" for="checkbox-1">Regular checkbox</label>
          </div>
            <!-- Checked checkbox -->
          <div class="form-check checkbox-lg">
            <input class="form-check-input" type="checkbox" value="" id="checkbox-2" checked/>
            <label class="form-check-label" for="checkbox-2">Large checkbox</label>
          </div>
            <!-- Checked checkbox -->
          <div class="form-check checkbox-xl">
            <input class="form-check-input" type="checkbox" value="" id="checkbox-3" checked/>
            <label class="form-check-label" for="checkbox-3">Extra large checkbox</label>
          </div>
          
        
    
        
            
           .checkbox-lg .form-check-input{
            top: .8rem;  
            scale: 1.4;
            margin-right: 0.7rem;
            }
     
           .checkbox-lg .form-check-label {  
            padding-top: 13px;  
            }
     
           .checkbox-xl .form-check-input {
            top: 1.2rem;
            scale: 1.7;
            margin-right: 0.8rem;
            }
     
           .checkbox-xl .form-check-label {  
            padding-top: 19px;  
            }