title: Bootstrap checkboxes acting weird on different browsers
body: <p>I'm working on a simple website with pure HTML, CSS, PHP and Bootstrap. I want to use the checkboxes from Bootstrap, but they seem to be acting weird in different browsers... For example in Chrome, they are really big and out of place.
  <a href="https://i.stack.imgur.com/8QiKM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8QiKM.png" alt="Checkboxes"></a></p>
  
  <p>And on Safari, they appear normal, but when clicked on, they do a jumping motion..</p>
  
  <p>I want them to appear normal size and all on the same line.</p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;label&gt;Products :&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;ul class="list-unstyled list-inline checkbox-list"&gt;
                &lt;li&gt;&lt;label class="checkbox-inline"&gt;Food &lt;/label&gt;
                    &lt;input type="checkbox" id="inlineCheckbox1" name="products[]" value="food"&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;label class="checkbox-inline"&gt;Books&lt;/label&gt;&lt;br&gt;
                    &lt;input type="checkbox" id="inlineCheckbox1" name="products[]" value="books"&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;label class="checkbox-inline"&gt;Phones&lt;/label&gt;&lt;br&gt;
                    &lt;input type="checkbox" id="inlineCheckbox1" name="products[]" value="phones"&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Any idea?</p>