Increase Bootstrap Checkbox And Radio Button Sizes

How to increase the size of a Bootstrap checkbox, radio button, and switch button size with some custom CSS code. This is a simple CSS trick to change the size Bootstrap form input type.

It is a good idea to change the Bootstrap component’s dimensions. If you want to ask the question How to make the checkbox larger than it currently is in Bootstrap or default.

HTML

<div class="mx-auto d-table mt-5">
    <h2>Increase checkbox size</h2>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="DefaultCheckbox">
        <label class="form-check-label" for="DefaultCheckbox">
        Default checkbox
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="DefaultCheckbox2" checked>
        <label class="form-check-label" for="DefaultCheckbox2">
        Checked checkbox
        </label>
    </div>
    <hr>
    <h2>Increase radio button size</h2>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="DefaultRadiobtn">
        <label class="form-check-label" for="DefaultRadiobtn">
        Default radio Button
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="DefaultRadiobtn2" checked>
        <label class="form-check-label" for="DefaultRadiobtn2">
        Checked radio Button
        </label>
    </div>
    <hr>
    <h2>Increase form switch checkbox button size</h2>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="SwitchCheckBox">
        <label class="form-check-label" for="SwitchCheckBox">Switch checkbox input</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="SwitchCheckBox2" checked>
        <label class="form-check-label" for="SwitchCheckBox2">Checked switch checkbox input</label>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>

CSS

.form-check {
    display: flex;
    align-items: center;
}
.form-check label {
    margin-left: 10px;
    font-size: 18px;
    font-weight: 500;
}
.form-check .form-check-input[type=checkbox] {
    border-radius: .25em;
    height: 50px;
    width: 50px;
}
.form-check .form-check-input[type=radio] {
    border-radius: 100%;
    height: 50px;
    width: 50px;
}
.form-switch .form-check-input[type=checkbox] {
    border-radius: 2em;
    height: 50px;
    width: 100px;
}