How to style checkboxes using custom CSS and bootstrap?

To make better user experience, you can modify checkbox. You can resize it in different ways. I briefly discussed few productive ways.

How to style checkboxes using custom CSS and bootstrap?

Different ways to style checkboxes 

Method 1: Use transform property
Method 2: Use zoom property
Method 3: Change the content value 

Method 1: Use transform property

You can define scale value from transform property to resize checkbox. The following code will change all your checkboxes within the web page. 

input[type=checkbox] {
    transform: scale(1.5);
}

It can make some problems to recognize the code above for some browsers. So you should use some vendor prefix like below. 

input[type=checkbox]{
  -ms-transform: scale(1.5); /* Internet Explorer */  
  -moz-transform: scale(1.5); /* Fire Fox */
  -webkit-transform: scale(1.5); /* Safari and Chrome */ 
  -o-transform: scale(1.5); /* Opera */  
  transform: scale(1.5);
padding: 10px; }

Method 2: Use zoom property

You can get better results by using the zoom property. From my perspective, it makes a clearer image than transform property. The browser will use the non-standard zoom feature if it is supported (nice quality) or standard property transform: scale (blurry).

input[type="checkbox"] {
    zoom: 1.5;
}

Method 3: Change the content value 

Another way to modify the checkbox is to define content value. To do this you should hide the default checkbox. But I don't like this method because sometimes it makes different sizes for the checked and unchecked icons. 

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐ "; color:blue; font-size:20px}
input:checked + label:before {content:"☑ ";font-size:13px}

You can use bootstrap also to show your desired result.

<input id="check" type="checkbox"><label for="check">Checkbox</label>

Note: Setting display: none on input will prevent it from being selected with the tab key.