title: Twitter Bootstrap - changing height of checkboxes in form
body: <p>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.</p>
  
  <p>Here's my form html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div&gt;
  
          &lt;p&gt;Tick all that apply:&lt;/p&gt;
  
          &lt;form role="form" action="continue.php" method="post"&gt;
              &lt;input type="hidden" name="selectionID" value="4567"&gt;
              &lt;div class="checkbox"&gt;
                  &lt;label&gt;
                      &lt;input type="checkbox" name="selection[]" value="Fever/Temperature"&gt;Apples&lt;br&gt;
                      &lt;input type="checkbox" name="selection[]" value="Swelling or redness at injection site"&gt;Oranges&lt;br&gt;
                      &lt;input type="checkbox" name="selection[]" value="Pain at injection site"&gt;Bananas&lt;br&gt;
                      &lt;input type="checkbox" name="selection[]" value="Tired/Fatigued"&gt;Pears&lt;br&gt;
                      &lt;input type="checkbox" name="selection[]" value="Irritable"&gt;Mangoes&lt;br&gt;
                      &lt;input type="checkbox" name="selection[]" value="Sleep pattern change"&gt;Watermelon&lt;br&gt;
                      &lt;input type="checkbox" name="selection[]" value="Other"&gt;Other&lt;br&gt;
  
                  &lt;/label&gt;
              &lt;/div&gt;
  
              &lt;button type="submit" class="btn btn-primary"&gt;Next&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I've also setup a jsfiddle <a href="http://jsfiddle.net/fmdataweb/3FD3c/" rel="nofollow">here</a></p>