How can I change the size of a Bootstrap checkbox

Question

Wondering if its possible to change the size of checkbox as it s possible with buttons  I want it to be bigger  so it makes it easy to press  Right now its looking like this     Code     lt div class  form-group  gt       lt label  class  col-md-7 control-label  gt Kalsiumklorid   lt  label gt       lt div class  col-md-5   gt           Form  checkbox  O Kals Klor   1   array  class    gt   form-control                lt  div gt     lt  div gt

User · Answer

It is possible to implement custom bootstrap checkbox for the most popular browsers nowadays.

You can check my Bootstrap-Checkbox project in GitHub, which contains simple .less file. There is a good article in MDN describing some techniques, where the two major are:

Label redirects a click event.

Label can redirect a click event to its target if it has the for attribute like in <label for="target_id">Text</label> <input id="target_id" type="checkbox" />, or if it contains input as in Bootstrap case: <label><input type="checkbox" />Text</label>.

It means that it is possible to place a label in one corner of the browser, click on it, and then the label will redirect click event to the checkbox located in other corner producing check/uncheck action for the checkbox.

We can hide original checkbox visually, but make it is still working and taking click event from the label. In the label itself we can emulate checkbox with a tag or pseudo-element :before :after.
General non supported tag for old browsers

Some old browsers does not support several CSS features like selecting siblings p+p or specific search input[type=checkbox]. According to the MDN article browsers that support these features also support :root CSS selector, while others not. The :root selector just selects the root element of a document, which is html in a HTML page. Thus it is possible to use :root for a fallback to old browsers and original checkboxes.

Final code snippet:

_x000D_

:root {_x000D_
  /* larger checkbox */_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox] {_x000D_
  /* hide original check box */_x000D_
  opacity: 0;_x000D_
  position: absolute;_x000D_
  /* find the nearest span with checkbox-placeholder class and draw custom checkbox */_x000D_
  /* draw checkmark before the span placeholder when original hidden input is checked */_x000D_
  /* disabled checkbox style */_x000D_
  /* disabled and checked checkbox style */_x000D_
  /* when the checkbox is focused with tab key show dots arround */_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox] + span.checkbox-placeholder {_x000D_
  width: 14px;_x000D_
  height: 14px;_x000D_
  border: 1px solid;_x000D_
  border-radius: 3px;_x000D_
  /*checkbox border color*/_x000D_
  border-color: #737373;_x000D_
  display: inline-block;_x000D_
  cursor: pointer;_x000D_
  margin: 0 7px 0 -20px;_x000D_
  vertical-align: middle;_x000D_
  text-align: center;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder {_x000D_
  background: #0ccce4;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder:before {_x000D_
  display: inline-block;_x000D_
  position: relative;_x000D_
  vertical-align: text-top;_x000D_
  width: 5px;_x000D_
  height: 9px;_x000D_
  /*checkmark arrow color*/_x000D_
  border: solid white;_x000D_
  border-width: 0 2px 2px 0;_x000D_
  /*can be done with post css autoprefixer*/_x000D_
  -webkit-transform: rotate(45deg);_x000D_
  -moz-transform: rotate(45deg);_x000D_
  -ms-transform: rotate(45deg);_x000D_
  -o-transform: rotate(45deg);_x000D_
  transform: rotate(45deg);_x000D_
  content: "";_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:disabled + span.checkbox-placeholder {_x000D_
  background: #ececec;_x000D_
  border-color: #c3c2c2;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:checked:disabled + span.checkbox-placeholder {_x000D_
  background: #d6d6d6;_x000D_
  border-color: #bdbdbd;_x000D_
}_x000D_
:root label.checkbox-bootstrap input[type=checkbox]:focus:not(:hover) + span.checkbox-placeholder {_x000D_
  outline: 1px dotted black;_x000D_
}_x000D_
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox] + span.checkbox-placeholder {_x000D_
  width: 26px;_x000D_
  height: 26px;_x000D_
  border: 2px solid;_x000D_
  border-radius: 5px;_x000D_
  /*checkbox border color*/_x000D_
  border-color: #737373;_x000D_
}_x000D_
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox]:checked + span.checkbox-placeholder:before {_x000D_
  width: 9px;_x000D_
  height: 15px;_x000D_
  /*checkmark arrow color*/_x000D_
  border: solid white;_x000D_
  border-width: 0 3px 3px 0;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<p>_x000D_
 Original checkboxes:_x000D_
</p>_x000D_
<div class="checkbox">_x000D_
      <label class="checkbox-bootstrap">                                        _x000D_
          <input type="checkbox">             _x000D_
          <span class="checkbox-placeholder"></span>           _x000D_
          Original checkbox_x000D_
      </label>_x000D_
 </div>_x000D_
 <div class="checkbox">_x000D_
      <label class="checkbox-bootstrap">                                        _x000D_
          <input type="checkbox" disabled>             _x000D_
          <span class="checkbox-placeholder"></span>           _x000D_
          Original checkbox disabled_x000D_
      </label>_x000D_
 </div>_x000D_
 <div class="checkbox">_x000D_
      <label class="checkbox-bootstrap">                                        _x000D_
          <input type="checkbox" checked>             _x000D_
          <span class="checkbox-placeholder"></span>           _x000D_
          Original checkbox checked_x000D_
      </label>_x000D_
 </div>_x000D_
  <div class="checkbox">_x000D_
      <label class="checkbox-bootstrap">                                        _x000D_
          <input type="checkbox" checked disabled>             _x000D_
          <span class="checkbox-placeholder"></span>           _x000D_
          Original checkbox checked and disabled_x000D_
      </label>_x000D_
 </div>_x000D_
 <div class="checkbox">_x000D_
      <label class="checkbox-bootstrap checkbox-lg">                           _x000D_
          <input type="checkbox">             _x000D_
          <span class="checkbox-placeholder"></span>           _x000D_
          Large checkbox unchecked_x000D_
      </label>_x000D_
 </div>_x000D_
  <br/>_x000D_
<p>_x000D_
 Inline checkboxes:_x000D_
</p>_x000D_
<label class="checkbox-inline checkbox-bootstrap">_x000D_
  <input type="checkbox">_x000D_
  <span class="checkbox-placeholder"></span>_x000D_
  Inline _x000D_
</label>_x000D_
<label class="checkbox-inline checkbox-bootstrap">_x000D_
  <input type="checkbox" disabled>_x000D_
  <span class="checkbox-placeholder"></span>_x000D_
  Inline disabled_x000D_
</label>_x000D_
<label class="checkbox-inline checkbox-bootstrap">_x000D_
  <input type="checkbox" checked disabled>_x000D_
  <span class="checkbox-placeholder"></span>_x000D_
  Inline checked and disabled_x000D_
</label>_x000D_
<label class="checkbox-inline checkbox-bootstrap checkbox-lg">_x000D_
  <input type="checkbox" checked>_x000D_
  <span class="checkbox-placeholder"></span>_x000D_
  Large inline checked_x000D_
</label>

_x000D_

User · Answer

I have used this library with sucess  http   plugins krajee com checkbox-x  It requires jQuery and bootstrap 3 x  Download the zip here  https   github com kartik-v bootstrap-checkbox-x zipball master   Put the contents of the zip in a folder within your project  Pop the needed libs in your header   lt link href  http   netdna bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet  gt   lt link href  path to css checkbox-x min css  media  all  rel  stylesheet  type  text css    gt   lt script src    ajax googleapis com ajax libs jquery 1 12 3 jquery min js  gt  lt  script gt   lt script src  path to js checkbox-x min js  type  text javascript  gt  lt  script gt    Add the data controls to the element using the data-size  xl  to change the size as shown here http   plugins krajee com cbx-sizes-demo   lt label for  element id  gt CheckME lt  label gt   lt input type  checkbox  name  my element  id  element id  value  1  data-toggle  checkbox-x  data-three-state  false  data-size  xl   gt    There are numerous other features as well if you browse the plugin site

User · Answer

lt div id  rr-element  gt      lt label for  rr-1  gt         lt input type  checkbox  value  1  id  rr-1  name  rr    gt        Value 1     lt  label gt   lt  div gt    do this on the css div label input   margin-right 100px

User · Answer

Following works in bootstrap 4 and displays well in CSS  mobile and has no issues with label spacing   CSS  checkbox-lg  custom-control-label  before    checkbox-lg  custom-control-label  after     top   8rem    width  1 55rem    height  1 55rem      checkbox-lg  custom-control-label     padding-top  13px    padding-left  6px       checkbox-xl  custom-control-label  before    checkbox-xl  custom-control-label  after     top  1 2rem    width  1 85rem    height  1 85rem      checkbox-xl  custom-control-label     padding-top  23px    padding-left  10px     HTML  lt div class  quot custom-control custom-checkbox checkbox-lg quot  gt         lt input type  quot checkbox quot  class  quot custom-control-input quot  id  quot checkbox-3 quot  gt         lt label class  quot custom-control-label quot  for  quot checkbox-3 quot  gt Large checkbox lt  label gt       lt  div gt   You can also make it extra large by declaring checkbox-xl If anyone from BS team is reading this  it would be really good if you make this available right out of the box  I don t see anything for it in BS 5 either source

User · Answer

just use simple css  big-checkbox  width  1 5rem  height  1 5rem top 0 5rem

User · Answer

input type checkbox         Double-sized Checkboxes      -ms-transform  scale 2      IE      -moz-transform  scale 2      FF      -webkit-transform  scale 2      Safari and Chrome      -o-transform  scale 2      Opera      padding  10px

User · Answer

Or you can style it with pixels     big-checkbox  width  30px  height  30px

User · Answer

I used just  save in zoom   in example    my checkbox       width 5vw      height 5vh

User · Answer

It is possible in css  but not for all the browsers   The effect on all browsers   http   www 456bereastreet com lab form controls checkboxes   A possibility is a custom checkbox with javascript   http   ryanfait com resources custom-checkboxes-and-radio-buttons

[css] How can I change the size of a Bootstrap checkbox?

Examples related to css

Examples related to twitter-bootstrap

Examples related to checkbox

Examples related to laravel-4

Examples related to laravel-blade