Twitter Bootstrap - changing height of checkboxes in form

Question

I have a simple HTML form that uses the Twitter Bootstrap framework (v3.1.1). On the smartphone/iPhone these checkboxes are quite small and hard to select with your finger. I would like to make them larger/more spaced out so they are easier to hit but haven't found a way so far - is this even possible.

Here's my form html:

<div class="container">

    <div>

        <p>Tick all that apply:</p>

        <form role="form" action="continue.php" method="post">
            <input type="hidden" name="selectionID" value="4567">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="selection[]" value="Fever/Temperature">Apples<br>
                    <input type="checkbox" name="selection[]" value="Swelling or redness at injection site">Oranges<br>
                    <input type="checkbox" name="selection[]" value="Pain at injection site">Bananas<br>
                    <input type="checkbox" name="selection[]" value="Tired/Fatigued">Pears<br>
                    <input type="checkbox" name="selection[]" value="Irritable">Mangoes<br>
                    <input type="checkbox" name="selection[]" value="Sleep pattern change">Watermelon<br>
                    <input type="checkbox" name="selection[]" value="Other">Other<br>

                </label>
            </div>

            <button type="submit" class="btn btn-primary">Next</button>
        </form>
    </div>

</div>

I've also setup a jsfiddle here

See this question and my answer there http://stackoverflow.com/questions/22743457/size-of-checkbox-bootstrap/36800528#36800528 — DropHit, Apr 22 '16 at 18:10

score 4 · Accepted Answer · answered May 19 '14 at 07:03

This isn't easy to do cross-broswer .. check out the study made here: http://www.456bereastreet.com/lab/form_controls/checkboxes/

Also, make sure you're using correct HTML code. You should wrap each of your checkboxes with label, like this:

 <div class="checkbox">
     <label>
         <input type="checkbox" name="selection[]" value="Fever/Temperature" />Apples<br/>
     </label>
     <label>
         <input type="checkbox" name="selection[]" value="Swelling or redness at injection site" />Oranges<br/>
     </label>
     <label>
         <input type="checkbox" name="selection[]" value="Pain at injection site" />Bananas<br/>
     </label>
     <!-- etc. -->
</div>

Twitter Bootstrap - changing height of checkboxes in form

1 Answers1