<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="[ row ]">
<h2>Fancy Bootstrap Checkboxes that work with <a href="https://bootswatch.com/" target="_blank">Bootswatch</a></h2>
<p>My latest project needed some checkboxes that worked very nicely with bootswatch. Use the Theme picker above here to check out what the checkboxes look like in the different themes.</p>
</div>
<div class="[ col-xs-12 col-sm-6 ]">
<h3>Standard Checkboxes</h3><hr />
<div class="[ form-group ]">
<input type="checkbox" name="fancy-checkbox-default" id="fancy-checkbox-default" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default" class="[ btn btn-default ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="fancy-checkbox-default" class="[ btn btn-default active ]">
Default Checkbox
</label>
</div>
</div>
<div class="[ form-group ]">
<input type="checkbox" name="fancy-checkbox-primary" id="fancy-checkbox-primary" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-primary" class="[ btn btn-primary ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="fancy-checkbox-primary" class="[ btn btn-default active ]">
Primary Checkbox
</label>
</div>
</div>
<div class="[ form-group ]">
