I am creating a simple check box with the code from the official bootstrap documentation:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
I am wondering how to make the checkbox larger than it currently is? I have tried editing the css of customCheck
and changing the height and width properties, but that does not increase the size of the box.
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 ).
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>
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>