Bootstrap checkbox styling

Question

In the bootstrap docs eg http://getbootstrap.com/css/#forms the checkbox style is slightly rounded and subtle.

However when I reference the bootstrap 3.3.7 css and use this html

<div class="checkbox">
    <label>
        <input type="checkbox" id="cancelled">
        Cancelled
    </label>
</div>

my checkbox looks like the standard ugly HTML checkbox.

The same can be seen here https://codepen.io/mathumatix/pen/dzvQvg. I found this question Why checkbox style is not bootstrap style which states that Bootstrap 3.x does not include styling for checkboxes. If that is so, how is the checkbox styled in the Bootstrap docs? With custom css which is not shown? I also tried using Bootstrap 4 alpha and I still don't get any styling on the checkbox. All my other UI elements have the Bootstrap style. What am I missing?

Possible duplicate of [Customize Bootstrap checkboxes](https://stackoverflow.com/questions/44279398/customize-bootstrap-checkboxes) — Paolo Forgia, Oct 16 '17 at 14:53

score 2 · Answer 1 · answered Aug 08 '17 at 17:16

2

Turns out it is the browser. Chrome draws checkboxes natively with a shaded and rounded box which I mistakenly believed was Bootstrap styling. IE and Edge draw the square. I used css found here to make it look how I want.

answered Aug 08 '17 at 17:16

Mathumatix

93
1
11

Caique Romero · Answer 2 · 2017-08-09T13:08:09.020

Made the fiddle with your code and including Bootstrap.css

It works well. Maybe some external code or browser settings are affecting your css.

https://jsfiddle.net/1ca9ufku/

HTML:

<div class="checkbox">
    <label>
        <input type="checkbox" id="cancelled">
        Cancelled
    </label>
</div>

CSS:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Checkbox

Bootstrap checkbox styling

2 Answers2