Change Bootstrap 4 checkbox size

Question

Is there a way to change Bootstraps 4 beta checkbox size to a bigger one?

I almost tried altering styles but this didn't work.

Thanks!

I know this might be a bit moot now that Bootstrap 4 is long out of beta, but why do most of the answers here concern themselves with custom controls when the OP was asking about a standard checkbox? — Philip Stratford, Oct 27 '20 at 15:58

score 50 · Accepted Answer · edited Jun 25 '18 at 14:13

50

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>

edited Jun 25 '18 at 14:13

D.Rosado

5,634
3
36
56

answered Jan 17 '18 at 11:38

WebDevBooster

14,674
9
66
70

1

Yep. Works perfectly. Great job. Thanks! – Bezelinjah Jan 21 '18 at 12:04
I'm sorry mate. I didn't know this was important for You if I knew I'd do it couple days ago! – Bezelinjah Jan 21 '18 at 12:12
Question. Why this checkbox gets grey background? – Bezelinjah Jan 21 '18 at 15:39
Well, that's the default style from Bootstrap. – WebDevBooster Jan 21 '18 at 16:58
Well default checkbox has white background. Any idea how can we change 'big checkbox' bg to white? – Bezelinjah Jan 21 '18 at 18:51
With this particular style, the actual HTML checkbox is hidden and a Bootstrap style is applied to the whole thing. Post a new Bootstrap 4 question so that I can earn a few points answering that. :-) – WebDevBooster Jan 21 '18 at 19:28
Sure. There you go https://stackoverflow.com/questions/48373119/change-bootstrap-4-checkbox-background-color – Bezelinjah Jan 22 '18 at 00:16
@WebDevBooster could you add a link to the issue in the Bootstrap tracker? – donV Feb 02 '18 at 09:29
In my case (bootstrap vue rc12 + bootstrap 4.2.1) it was necessary to use `!important` – TitanFighter Jan 20 '19 at 23:25
Update: The ability to change the size of a custom checkbox will probably be released in Bootstrap 5: https://github.com/twbs/bootstrap/issues/27803#issuecomment-450462476 – Alexander Jul 03 '19 at 20:24
Use this https://stackoverflow.com/questions/57805394/how-to-change-size-of-icheck-checkbox-and-add-border-radius – Pritesh Sep 05 '19 at 13:18

score 23 · Answer 2 · answered Jan 25 '19 at 14:18

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"

matthew.kempson · Answer 3 · 2019-03-11T15:30:46.930

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>

this messes with the checkbox position (at least in my case...). — Luis Rock, Jan 22 '20 at 09:22
Well, if want this to work without a label text, just place a `&nbsp` (Non-breaking Space HTML char) instead of it. — Luis Rock, Jan 26 '20 at 17:53

score 5 · Answer 4 · answered Jul 17 '19 at 07:06

5

If you import de scss from Bootstrap you can override the variable $custom-control-indicator-size.

$custom-control-indicator-size: 1.75rem;

answered Jul 17 '19 at 07:06

alzz

51
1
2

Change Bootstrap 4 checkbox size

4 Answers4