Increasing the size of a bootstrap checkbox

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.

Answers:

Answer

It is not a good idea to change bootstrap components dimensions, you should change variables in bootstrap but it means to recompile library. Anyway what you want can be done i this way:

.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}
Answer

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.

Answer

It's probably best to have your own file and change the css variables for the dimensions of the switch:

@import "bootstrap/scss/_functions.scss";
@import "bootstrap/scss/_variables.scss";

$custom-control-indicator-size: 1.5rem;
$custom-switch-width: $custom-control-indicator-size * 1.75;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2;
$custom-switch-indicator-size: subtract(
  $custom-control-indicator-size,
  $custom-control-indicator-border-width * 4
);

@import "bootstrap/scss/bootstrap";

Answer

Since you are trying to get it done in bootstrap, its easy. Add a div container first with btn-group-toggle to use buttons in group (that is if you want.).

Add p-3 or p-5 class in label to expand it to your liking

<div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary p-3">
            <input type="checkbox" id="customCheck" name="example1"> Check this custom checkbox
        </label>
    </div>
Answer

You can try the following way:

.custom-control-label::before, 
.custom-control-label::after {
  width: 2.25rem !important;
  height: 2.25rem !important;
  margin: 1rem;
}
.custom-control-label{
  margin: 1.5rem 2rem;
}
<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">


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

Answer

Here is a working example using custom css

.custom-checkbox-lg .custom-control-label::before,
.custom-checkbox-lg .custom-control-label::after {
  width: 2rem;
  height: 2rem;
}

.custom-checkbox-lg .custom-control-label {
  margin: .5rem 1rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1" name="example1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-checkbox custom-checkbox-lg">
  <input type="checkbox" class="custom-control-input" id="customCheck2" name="example1">
  <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>

Answer

I don't have enough reputation to comment on Munkh-Erdene Zorigbold. His Answer works perfectly. Just override translateX function of custom switch by adding following line of css. So that Switch on and off button travels all the way to your new width.

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

This class .custom-switch-adaptive will make the switch adapt to text size and include the label text inside.

Demo

P.S. A similar feature will be added in Bootstrap v5

enter image description here

SCSS

.custom-switch.custom-switch-adaptive {
  padding-left: 0;

  .custom-control-label {
    padding: 0 1.5em;
    position: relative;
    border-radius: 1em;
    line-height: 1.4em;
    color: $text-muted;
    border: 1px solid $text-muted;
    background-color: $light;
    transition: background-color 200ms;

    &::before {
      content: none;
    }
    &::after {
      position: absolute;
      height: 1em;
      top: 0.2em;
      left: 0.2em;
      width: 1em;
      border-radius: 1em;

      transition: left 200ms;
    }
  }


  .custom-control-input:checked ~ .custom-control-label {
    color: $white;
    background-color: $success;
    border-color: $success;

    &::after {
      background-color: $white;
      left: calc(100% - 1.2em);

      transform: none;
      -webkit-transform: none;
    }
  }
}

HTML

<div class="form-group h1">
  <div class="custom-control custom-switch custom-switch-adaptive">
    <input id="test4" type="checkbox" class="custom-control-input">
    <label for="test4" class="custom-control-label">h1 text size</label>
  </div>
</div>
Answer

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

SCSS Solution

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

Here I made all resolutions switch with one @mixin ( @mixin is very similar to JS functions but it does not return anything ), for custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl classes.

CSS Solution

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

Here I made all resolutions switch for custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl classes.

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.