Change Bootstrap 4 Checkbox Size

Answer :

There is currently an issue with this and I reported it to Bootstrap. Until that's fixed do the following:

First of all, use the form-control-lg class. Once the issue is fixed using that class will be all you need.

Until the issue is fixed add the following css:

.custom-control-label::before,  .custom-control-label::after {     top: .8rem;     width: 1.25rem;     height: 1.25rem; } 

Here's a complete working code example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">  <style> .custom-control-label::before,  .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } </style>   <div class="custom-control form-control-lg custom-checkbox">     <input type="checkbox" class="custom-control-input" id="customCheck1">     <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label> </div>

I've approached this a bit differently. Add the following to custom CSS.

.checkbox-1x {     transform: scale(1.5);     -webkit-transform: scale(1.5); } .checkbox-2x {     transform: scale(2);     -webkit-transform: scale(2); } 

Then write the input like this: input type="checkbox" class="checkbox-1x"

For Bootstrap 4.2.1 users this is how I got it to work.

I have introduced a new class custom-control-lg to handle it.

.custom-control-lg .custom-control-label::before, .custom-control-lg .custom-control-label::after {     top: 0.1rem !important;     left: -2rem !important;     width: 1.25rem !important;     height: 1.25rem !important; }  .custom-control-lg .custom-control-label {     margin-left: 0.5rem !important;     font-size: 1rem !important; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>  <div class="card m-3"> <div class="card-body">     <div class="custom-control-lg custom-control custom-checkbox">         <input class="custom-control-input" id="checkbox-large" type="checkbox"/>         <label class="custom-control-label" for="checkbox-large">             Checkbox label for large input!         </label>     </div>     <div class="custom-control custom-checkbox">         <input class="custom-control-input" id="checkbox-small" type="checkbox"/>         <label class="custom-control-label" for="checkbox-small">             Checkbox label for small input!         </label>     </div> </div> </div>