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

Create CSS to enlarge checkboxes

You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.

I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

---

input {  display: none;}
label input[type=checkbox] ~ span {  display: inline-block;  vertical-align: middle;  cursor: pointer;  background: #fff;  border: 1px solid #888;  padding: 1px;  height: 20px;  width: 20px;}
label input[type=checkbox]:checked ~ span {  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');  background-size: 100%;}

<label>  Click me:  <input type="checkbox" />  <span></span></label>

---

Related Topics