<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Test Modal, Click the button</h2> <a href="#" class="btn btn-default" data-toggle="modal" data-target="#myModal">The Button</a> </div> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Who you gone done brews for?</h4> </div> <div class="modal-body"> <div class="[ form-group ]"><!-- checkbox --> <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 ]"> <img src="https://placehold.it/100x18" /> </label> </div> </div><!-- checkbox --> <div class="[ form-group ]"><!-- checkbox --> <input type="checkbox" name="fancy-checkbox-default1" id="fancy-checkbox-default1" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default1" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-default1" class="[ btn btn-default active ]"> <img src="https://placehold.it/100x18" /> </label> </div> </div><!-- checkbox --> <div class="[ form-group ]"><!-- checkbox --> <input type="checkbox" name="fancy-checkbox-default2" id="fancy-checkbox-default2" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default2" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-default2" class="[ btn btn-default active ]"> <img src="https://placehold.it/100x18" /> </label> </div> </div><!-- checkbox --> <div class="[ form-group ]"><!-- checkbox --> <input type="checkbox" name="fancy-checkbox-default3" id="fancy-checkbox-default3" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default3" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-default3" class="[ btn btn-default active ]"> <img src="https://placehold.it/100x18" /> </label> </div> </div><!-- checkbox --> <div class="[ form-group ]"><!-- checkbox --> <input type="checkbox" name="fancy-checkbox-default4" id="fancy-checkbox-default4" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default4" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-default4" class="[ btn btn-default active ]"> <img src="https://placehold.it/100x18" /> </label> </div> </div><!-- checkbox --> <div class="[ form-group ]"><!-- checkbox --> <input type="checkbox" name="fancy-checkbox-default5" id="fancy-checkbox-default5" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default5" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-default5" class="[ btn btn-default active ]"> <img src="https://placehold.it/100x18" /> </label> </div> </div><!-- checkbox --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

.form-group input[type="checkbox"] { display: none; } .form-group input[type="checkbox"] + .btn-group > label span { width: 20px; } .form-group input[type="checkbox"] + .btn-group > label span:first-child { display: none; } .form-group input[type="checkbox"] + .btn-group > label span:last-child { display: inline-block; } .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child { display: inline-block; } .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child { display: none; }