<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 */
