<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>boxes</legend> <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-default"> <span class="fa fa-check-square-o fa-lg"></span> <span class="fa fa-square-o fa-lg"></span> <span class="content"><a href="#">Lorem2 ipsum amet</a></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> </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 */