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

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

<div class="custom-control custom-checkbox checkbox-lg">
      <input type="checkbox" class="custom-control-input" id="checkbox-3">
      <label class="custom-control-label" for="checkbox-3">Large checkbox</label>
    </div>

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

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

User · Answer

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

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

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    lt label for  target id  gt Text lt  label gt   lt input id  target id  type  checkbox    gt   or if it contains input as in Bootstrap case   lt label gt  lt input type  checkbox    gt Text lt  label gt    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   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   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt p gt  x000D   Original checkboxes  x000D   lt  p gt  x000D   lt div class  checkbox  gt  x000D         lt label class  checkbox-bootstrap  gt                                          x000D             lt input type  checkbox  gt               x000D             lt span class  checkbox-placeholder  gt  lt  span gt             x000D            Original checkbox x000D         lt  label gt  x000D    lt  div gt  x000D    lt div class  checkbox  gt  x000D         lt label class  checkbox-bootstrap  gt                                          x000D             lt input type  checkbox  disabled gt               x000D             lt span class  checkbox-placeholder  gt  lt  span gt             x000D            Original checkbox disabled x000D         lt  label gt  x000D    lt  div gt  x000D    lt div class  checkbox  gt  x000D         lt label class  checkbox-bootstrap  gt                                          x000D             lt input type  checkbox  checked gt               x000D             lt span class  checkbox-placeholder  gt  lt  span gt             x000D            Original checkbox checked x000D         lt  label gt  x000D    lt  div gt  x000D     lt div class  checkbox  gt  x000D         lt label class  checkbox-bootstrap  gt                                          x000D             lt input type  checkbox  checked disabled gt               x000D             lt span class  checkbox-placeholder  gt  lt  span gt             x000D            Original checkbox checked and disabled x000D         lt  label gt  x000D    lt  div gt  x000D    lt div class  checkbox  gt  x000D         lt label class  checkbox-bootstrap checkbox-lg  gt                             x000D             lt input type  checkbox  gt               x000D             lt span class  checkbox-placeholder  gt  lt  span gt             x000D            Large checkbox unchecked x000D         lt  label gt  x000D    lt  div gt  x000D     lt br  gt  x000D   lt p gt  x000D   Inline checkboxes  x000D   lt  p gt  x000D   lt label class  checkbox-inline checkbox-bootstrap  gt  x000D     lt input type  checkbox  gt  x000D     lt span class  checkbox-placeholder  gt  lt  span gt  x000D    Inline  x000D   lt  label gt  x000D   lt label class  checkbox-inline checkbox-bootstrap  gt  x000D     lt input type  checkbox  disabled gt  x000D     lt span class  checkbox-placeholder  gt  lt  span gt  x000D    Inline disabled x000D   lt  label gt  x000D   lt label class  checkbox-inline checkbox-bootstrap  gt  x000D     lt input type  checkbox  checked disabled gt  x000D     lt span class  checkbox-placeholder  gt  lt  span gt  x000D    Inline checked and disabled x000D   lt  label gt  x000D   lt label class  checkbox-inline checkbox-bootstrap checkbox-lg  gt  x000D     lt input type  checkbox  checked gt  x000D     lt span class  checkbox-placeholder  gt  lt  span gt  x000D    Large inline checked x000D   lt  label gt  x000D   x000D   x000D

User · Answer

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

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

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

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

[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