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