Increasing the size of a bootstrap checkbox

FOR ALL BOOTSTRAP VERSIONS

No extra CSS/SCSS

Actually, the solution is quite simple, either you apply custom css/scss whatever to make the button bigger OR

You can use the transform: scale(); property of css on the switch to increase the size of the button, and trust me this is the easiest way to solve the problem and it works.


<div class="form-check form-switch py-5">

  <!-- Size of the default switch will increase 1.8 times -->
  <input class="form-check-input mx-2" 
         type="checkbox" 
         role="switch" 
         id="flexSwitchCheckDefault" 
         style="transform: scale(1.8);">

  <label class="form-check-label" 
         for="flexSwitchCheckDefault" 
         id="AucTu">Autocomplete Turned Off</label>
</div>

PS. You dont need to add custom css/scss just dont forget to add some margin from the switch, or padding from the div (or somepart of it will get hidden) :)

I added classes like *-sm, *-md, *-lg, *-xl for the bootstrap switch.

Here I made all resolutions switch with one @mixin ( @mixin is very similar to JS functions but it does not return anything ).

For Bootstrap 4

custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl

SCSS: https://codepen.io/nisharg/pen/VwLbYvv

CSS: https://codepen.io/nisharg/pen/mdJmywW

LIVE SNIPPET (CSS)

/* for sm */

.custom-switch.custom-switch-sm .custom-control-label {
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.custom-switch.custom-switch-sm .custom-control-label::before {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}

.custom-switch.custom-switch-sm .custom-control-label::after {
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    border-radius: calc(1rem - (1rem / 2));
}

.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1rem - 0.25rem));
}

/* for md */

.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2));
}

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

/* for lg */

.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem;
    padding-bottom: 2rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: calc(3rem - (2rem / 2));
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2rem - 0.25rem));
}

/* for xl */

.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
    width: calc(2.5rem - 4px);
    height: calc(2.5rem - 4px);
    border-radius: calc(4rem - (2.5rem / 2));
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2.5rem - 0.25rem));
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="custom-control custom-switch custom-switch-sm">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-sm">
  <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
  <label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-md">
  <input type="checkbox" class="custom-control-input" id="customSwitch3">
  <label class="custom-control-label" for="customSwitch3">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-md">
  <input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
  <label class="custom-control-label" for="customSwitch4">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-lg">
  <input type="checkbox" class="custom-control-input" id="customSwitch5">
  <label class="custom-control-label" for="customSwitch5">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-lg">
  <input type="checkbox" class="custom-control-input" id="customSwitch6" checked>
  <label class="custom-control-label" for="customSwitch6">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-xl">
  <input type="checkbox" class="custom-control-input" id="customSwitch7">
  <label class="custom-control-label" for="customSwitch7">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-xl">
  <input type="checkbox" class="custom-control-input" id="customSwitch8" checked>
  <label class="custom-control-label" for="customSwitch8">Default Checked Switch</label>
</div>

For Bootstrap 5

form-switch-sm, form-switch-md, form-switch-lg, form-switch-xl

SCSS: https://codepen.io/nisharg/pen/gOPLOYY

CSS: https://codepen.io/nisharg/pen/ExPNxYE

LIVE SNIPPET (CSS)

.form-check-input {
  clear: left;
}

.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

<div class="form-check form-switch form-switch-sm">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-sm">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-md">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-md">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-lg">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-lg">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-xl">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch form-switch-xl">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

In bootstrap 4, if you want to change or increase custom switch (a beautiful switch from iOS), you should dive into bootstrap's css file and change its dimensions of a class of custom-switch. enter image description here html code as following:

<div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input" id="switchA" name="switch">
 <label class="custom-control-label" for="switchA">Custom checkbox</label>
</div>

In boostrap.css (version 4.3.1 and not minified) file, you should find the custom-switch class and change the following parameters in the below. You must delete all the comments I added on.

.custom-switch {
  padding-left: 2.25rem;
  padding-bottom: 1rem; // added for positioning
}

.custom-control-label { // added for alignment with the switch
  padding-top: 0.5rem;
  padding-left: 2rem;
  padding-bottom: 0.1rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  height: 2rem;
  width: 3.5rem;    // it was 1.75rem before. Sliding way is longer than before.
  pointer-events: all;
  border-radius: 1rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(2rem - 4px);   // it was calc(1rem - 4px) before. Oval is bigger than before.
  height: calc(2rem - 4px);  // it was calc(1rem - 4px) before. Oval is bigger than before.
  background-color: #adb5bd;
  border-radius: 2rem; //   it was 0.5rem before. Oval is bigger than before.
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(1.5rem); //translateX(0.75rem);
  transform: translateX(1.5rem); //translateX(0.75rem);
}

After copied these code to Bootstrap file, you must delete all comments I put in. Otherwise, It won't increase the size. I hope you enjoy your a bigger pretty switch now.

Increasing the size of a bootstrap checkbox

FOR ALL BOOTSTRAP VERSIONS

No extra CSS/SCSS

For Bootstrap 4

For Bootstrap 5

Tags:

Javascript

Css

Bootstrap 4

Bootstrap 5

Related

Recent Posts