Cool Checboxes for Bulma.io

Change the uncool checkboxes into something cooler.

View on Github

npm install cool-checkboxes-for-bulma.io

Supports bulma modifier classes. e.g is-primary, is-success, is-warning, is-info, is-danger, is-dark, is-black

Also supports is-circular to make the checkboxes round and is-inline to inline checkboxes.

Cool Checkboxes

Cool Circular Checkboxes

Inline Cool Checkboxes

Markup

<div class="field">
    <p class="control">
        <div class="b-checkbox is-warning">
            <input id="checkbox" class="styled" checked type="checkbox">
            <label for="checkbox">
                Is Warning
            </label>
        </div>
    </p>
</div>

<div class="field">
    <p class="control">
        <div class="b-checkbox is-warning is-circular">
            <input id="checkbox" class="styled" checked type="checkbox">
            <label for="checkbox">
                Is Warning
            </label>
        </div>
    </p>
</div>

<div class="field">
    <p class="control">
        <div class="b-checkbox is-warning is-inline">
            <input id="checkbox" class="styled" checked type="checkbox">
            <label for="checkbox">
                Is Warning
            </label>
        </div>
        <div class="b-checkbox is-danger is-inline">
            <input id="checkbox" class="styled" checked type="checkbox">
            <label for="checkbox">
                Is Warning
            </label>
        </div>
    </p>
</div>