"Checkboxes and Radio buttons + Font Awesome"
Bootstrap 3.3.0 Snippet by XDSolutions

<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> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <form action="index.php" id="frm-test" method="post" name="test" class="form-horizontal"> <fieldset> <input type="hidden" name="form" value="test" id="frm-test-elm-0" /> <div class="row"> <div class="col-sm-4"> <legend>Radio buttons</legend> <div class="form-group row"> <label class="control-label col-sm-2" for="frm-test-elm-100">Radio:</label> <div class="col-sm-10"> <div class="col"> <input type="checkbox" name="checkboxes[100-0]" id="frm-test-elm-100-0" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-100-0" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> <div class="col"> <input type="checkbox" name="checkboxes[100-1]" id="frm-test-elm-100-1" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-100-1" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> <div class="col"> <input type="checkbox" name="checkboxes[100-2]" id="frm-test-elm-100-2" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-100-2" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> </div> </div> <div class="col-sm-4"> <legend>Checkboxes</legend> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-110" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-1" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-110-1" class="btn btn-primary"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-2" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-110-2" class="btn btn-success"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-3" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-110-3" class="btn btn-info"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-4" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-110-4" class="btn btn-warning"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-5" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-110-5" class="btn btn-danger"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-6" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-110-6" class="btn btn-link"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet.</span> </label> </div> </div> </div> </div> <div class="col-sm-4"> <legend>Checkboxes</legend> <div class="form-group row"> <label class="control-label col-sm-4" for="frm-test-elm-120">Checkboxes:</label> <div class="col-sm-8"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-120" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-120" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> </label> </div> </div> </div> <div class="form-group row"> <label class="control-label col-sm-4" for="frm-test-elm-120-1">Checkboxes:</label> <div class="col-sm-8"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-120-1" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-120-1" class="btn btn-primary"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> </label> </div> </div> </div> <div class="form-group row"> <label class="control-label col-sm-4" for="frm-test-elm-120-2">Checkboxes:</label> <div class="col-sm-8"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-120-2" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-120-2" class="btn btn-success"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> </label> </div> </div> </div> <div class="form-group row"> <label class="control-label col-sm-4" for="frm-test-elm-120-3">Checkboxes:</label> <div class="col-sm-8"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-120-3" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-120-3" class="btn btn-info"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> </label> </div> </div> </div> <div class="form-group row"> <label class="control-label col-sm-4" for="frm-test-elm-120-4">Checkboxes:</label> <div class="col-sm-8"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-120-4" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-120-4" class="btn btn-warning"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> </label> </div> </div> </div> <div class="form-group row"> <label class="control-label col-sm-4" for="frm-test-elm-120-5">Checkboxes:</label> <div class="col-sm-8"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-120-5" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-120-5" class="btn btn-danger"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> </label> </div> </div> </div> <div class="form-group row"> <label class="control-label col-sm-4" for="frm-test-elm-120-6">Checkboxes:</label> <div class="col-sm-8"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-120-6" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-120-6" class="btn btn-link"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> </label> </div> </div> </div> </div> </div> </fieldset> </form> </div> <div class="container"> <!-- container --> <form action="index.php" id="frm-test" method="post" name="test" class="form-horizontal"> <fieldset> <input type="hidden" name="form" value="test" id="frm-test-elm-0" /> <div class="row"> <div class="col-sm-6"> <legend>Radio buttons</legend> <div class="form-group row"> <label class="control-label col-sm-2" for="frm-test-elm-130">Radio:</label> <div class="col-sm-10"> <div class="col"> <input type="checkbox" name="checkboxes[130-0]" id="frm-test-elm-130-0" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-130-0" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> <div class="col"> <input type="checkbox" name="checkboxes[130-1]" id="frm-test-elm-130-1" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-130-1" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> <div class="col"> <input type="checkbox" name="checkboxes[130-2]" id="frm-test-elm-130-2" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-130-2" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> </div> </div> <div class="col-sm-6"> <legend>Checkboxes</legend> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-140" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-140" class="btn btn-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-140-1" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-140-1" class="btn btn-primary"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-140-2" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-140-2" class="btn btn-success"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-140-3" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-140-3" class="btn btn-info"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-140-4" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-140-4" class="btn btn-warning"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-140-5" autocomplete="off" /> <div class="btn-group"> <label for="frm-test-elm-140-5" class="btn btn-danger"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="checkbox" name="checkboxes[249]" id="frm-test-elm-140-6" autocomplete="off" checked /> <div class="btn-group"> <label for="frm-test-elm-140-6" class="btn btn-link"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </label> </div> </div> </div> </div> </div> </fieldset> </form> </div>
/* Checkbox and Radio buttons */ .form-group input[type="radio"], .form-group input[type="checkbox"]{ display: none; } .form-group input[type="checkbox"] + .btn-group > label, .form-group input[type="radio"] + .btn-group > label{ white-space: normal; } .form-group input[type="checkbox"] + .btn-group > label.btn-default, .form-group input[type="radio"] + .btn-group > label.btn-default{ color: #333; background-color: #fff; border-color: #ccc; } .form-group input[type="checkbox"] + .btn-group > label.btn-primary, .form-group input[type="radio"] + .btn-group > label.btn-primary{ color: #fff; background-color: #428bca; border-color: #357ebd; } .form-group input[type="checkbox"] + .btn-group > label.btn-success, .form-group input[type="radio"] + .btn-group > label.btn-success{ color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .form-group input[type="checkbox"] + .btn-group > label.btn-info, .form-group input[type="radio"] + .btn-group > label.btn-info{ color: #fff; background-color: #5bc0de; border-color: #46b8da; } .form-group input[type="checkbox"] + .btn-group > label.btn-warning, .form-group input[type="radio"] + .btn-group > label.btn-warning{ color: #fff; background-color: #f0ad4e; border-color: #eea236; } .form-group input[type="checkbox"] + .btn-group > label.btn-danger, .form-group input[type="radio"] + .btn-group > label.btn-danger{ color: #fff; background-color: #d9534f; border-color: #d43f3a; } .form-group input[type="checkbox"] + .btn-group > label.btn-link, .form-group input[type="radio"] + .btn-group > label.btn-link { font-weight: normal; color: #428bca; border-radius: 0; } .form-group input[type="radio"] + .btn-group > label span:first-child, .form-group input[type="checkbox"] + .btn-group > label span:first-child{ display: none; } .form-group input[type="radio"] + .btn-group > label span:first-child + span, .form-group input[type="checkbox"] + .btn-group > label span:first-child + span{ display: inline-block; } .form-group input[type="radio"]:checked + .btn-group > label span:first-child, .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child{ display: inline-block; } .form-group input[type="radio"]:checked + .btn-group > label span:first-child + span, .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child + span{ display: none; } .form-group input[type="checkbox"] + .btn-group > label span[class*="fa-"], .form-group input[type="radio"] + .btn-group > label span[class*="fa-"]{ width: 15px; float: left; margin: 4px 0 2px -2px; } .form-group input[type="checkbox"] + .btn-group > label span.content, .form-group input[type="radio"] + .btn-group > label span.content{ margin-left: 10px; } /* End::Checkbox and Radio buttons */

Related: See More


Questions / Comments:

You can't make it work with a required attribute using jQuery Validation.

melvin881 () - 5 years ago - Reply 0


nice work dud this is awesome

abdelrahman mohammed () - 6 years ago - Reply 0