How to Change the Size of a Bootstrap Checkbox

Increasing the size of a bootstrap checkbox

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}

Change Bootstrap 4 checkbox size

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>

change size of checkbox in boostrap

Try like this :

  .big-checkbox  > input {width: 100px; height: 100px;}

Bootstrap checkbox size wrong with smaller body font

You can make the parent element flex and use align-items to center vertically. You would also need to use non-absolute position on the checkbox element. That will keep them centered vertically regardless the font size of the page.

html {   font-size: 62.5%;}
body {  font-size: 1.4rem;}
.custom-control {  display: flex;  align-items: baseline;}.custom-control-indicator {  position: static;  margin: 0 .5rem 0 0;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid">  <div class="row align-items-end">    <div class="col">      <div class="form-group">        <label for="worker">Worker</label>        <select class="form-control" id="worker">          <option>Jane Doe</option>          <option>John Smith</option>        </select>      </div>    </div>    <div class="col">      <div class="form-group">        <label class="custom-control custom-checkbox">          <input type="checkbox" class="custom-control-input">          <span class="custom-control-indicator"></span>          <span class="custom-control-description">Check this custom checkbox</span>        </label>      </div>    </div>  </div></div>

How to change size of checkbox and add border radius of icheck plugin?

Add this CSS

.icheck-primary[class*="icheck-"] > label {
    padding-left: 22px !important;
    line-height: 18px;
}

.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    margin-left: -22px;
}

.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after,
.icheck-primary[class*="icheck-"] > input:first-child:checked + label::after {
    top: 0px;
    width: 4px;
    height: 8px;
    left: 0px;
}

.icheck-primary[class*="icheck-"] > label{  padding-left:22px !important;  line-height: 18px;}.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before{  width:18px;  height:18px;  border-radius:5px;  margin-left:-22px;}
.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after, .icheck-primary[class*="icheck-"] > input:first-child:checked + label::after{  top:0px;  width: 4px;  height: 8px;  left:0px;}

<html><head>    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    <link href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css" rel="stylesheet">    <style>    .c-radius{    border-radius:5px;    }    </style></head><body>    <div class="checkbox icheck-primary">        <input type="checkbox" checked id="primary" class="c-radius"/>        <label for="primary">Keep username same as email id</label>    </div></body></html>

Bootstrap 4 - Left aligning a large checkbox

Its not tidy by setting an height and width for the checkbox should do the trick.

.checkbox-large {  width: 25px !important;  height: 25px}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /><form>  <div class="form-group">    <label asp-for="Enabled" class="control-label">Enabled</label>    <input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />    <span asp-validation-for="Enabled" class="text-danger"></span>  </div></form>

Change size of checkboxes in cells of bootstrap-table

.bs-checkbox input
{
    zoom:2;
}

How do you change the style of a bootstrap checkbox

Here's a demo bootply for custom checkboxes that I use, implementing bootstraps glyphicons for the icons. These degrade to ordinary checkboxes in IE8 without any additional code.

Here's the relevant CSS:

    .custom-checkbox > [type="checkbox"],
    .custom-checkbox > label{
        margin-bottom:0px !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked),
    .custom-checkbox > [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label,
    .custom-checkbox > [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left:0; 
        top: 50%;
        margin-top:-9px;
        width: 17px; 
        height: 17px;
        border: 1px solid #ddd;
        background: #ffffff;
        border-radius: 2px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        font: normal normal normal 12px/1 'Glyphicons Halflings';
        content: '\e013';
        position: absolute;
        top: 50%;
        margin-top:-7px;
        left: 2px;
        color: #94C947;
        xtransition: all .2s;
    }

    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0);
    }
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
        content: '\2212';
        left: 2px;
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        background-color: #eeeeee;
        border-color: #eeeeee;
        cursor: not-allowed;
        opacity: 1;
        color: #dadada;
    }
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
      color: #dadada; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:disabled + label {
      color: #aaa; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:checked:focus + label:before,
    .custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
        border: 1px solid #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .custom-checkbox > label:hover:before {
        border: 1px solid #88D2FF !important;
    }
    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
        border: 1px solid #E4E4E4 !important;
    }

and the HTML:

<div class="custom-checkbox">
    <input type="checkbox" id="cb1">
    <label for="cb1">Fancy Checkbox</label>
 </div>

HTH, -Ted