Increase Bootstrap Checkbox And Radio Buttons Sizes
Live Preview Compare Hosting

Increase Bootstrap Checkbox And Radio Buttons 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.

Add 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>

Add CSS

The CSS code will override the Bootstrap CSS, where we have changed the values of a few properties.

.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;
}

Full Code – Increase form input types size

<!DOCTYPE html>
<html lang="en">
<head>
<title>Increase Bootstrap Checkbox And Radio Buttons Sizes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css">
<style>
.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;
} 
</style>
</head>
<body>
    <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>
</body>
</html>

Leave a Comment