JSFiddle - React, Tailwind, and code Playground

Bootstrap Checkboxes

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <h2>Better Bootstrap Checkbox Buttons</h2>
    <h4>Sizes</h4>
    <div class="form-group" data-toggle="buttons">
        <label class="btn btn-default btn-lg toggle-checkbox primary">
            <i class="fa fa-fw"></i>
            <input id="one" autocomplete="off" class="" type="checkbox" />
            Large Button
        </label>
    </div>
    <div class="form-group" data-toggle="buttons">
        <label class="btn btn-default toggle-checkbox primary">
            <i class="fa fa-fw"></i>
            <input id="two" autocomplete="off" class="" type="checkbox" />
            Another Button
        </label>
    </div>
    <div class="form-group" data-toggle="buttons">
        <label class="btn btn-default btn-sm toggle-checkbox primary">
            <i class="fa fa-fw"></i>
            <input id="three" autocomplete="off" class="" type="checkbox" />
            Small Button
        </label>
    </div>
    <div class="form-group" data-toggle="buttons">
        <label class="btn btn-default btn-xs toggle-checkbox primary">
            <i class="fa fa-fw"></i>
            <input id="four" autocomplete="off" class="" type="checkbox" />
            X-Small Button
        </label>
    </div>
    
    <h4>
        Colors
        <small>(Bootstrap Defaults)</small>
    </h4>
    <div class="form-group" data-toggle="buttons">
        <label class="btn btn-default btn-sm toggle-checkbox">
            <i class="fa fa-fw"></i>
            <input id="default" autocomplete="off" class="" type="checkbox" />
            Default
        </label>
        <label class="btn btn-default btn-sm toggle-checkbox primary">
            <i...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:200, 300, 400, 700);
/* *** Demo CSS Styles *** */
body {
    margin: 0;
    font-family:'Open Sans', sans-serif;
    background: #dfdbd7;
    color: #545454;
    font-weight: 300;
}
* { border-radius: 0 !important; }

h2 {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 10px;
    font-weight: 300;
}
h4 {  }
    h4 small { color: #999999; }

/* *** The Checkboxes *** */
label.btn.toggle-checkbox > i.fa:before { content:"\f096"; }
    label.btn.toggle-checkbox.active > i.fa:before { content:"\f046"; }

label.btn.active { box-shadow: none; }
label.btn.primary.active {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #ffffff;
    box-shadow: none;
}
label.btn.info.active {
    background-color: #5bc0de;
    border-color: #46b8da;
    color: #ffffff;
    box-shadow: none;
}
label.btn.success.active {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #ffffff;
    box-shadow: none;
}
label.btn.warning.active {
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #ffffff;
    box-shadow: none;
}
label.btn.danger.active {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #ffffff;
    box-shadow: none;
}
label.btn.inverse.active {
    background-color: #222222;
    border-color: #111111;
    color: #ffffff;
    box-shadow: none;
}