I'm working on creating a user-friendly interface that includes a group of checkboxes displayed as buttons. My goal is to organize these buttons into groups with a maximum of 3 buttons per row.
<div class="container">
<div class="control-group">
<p class="pull-left"><label class="control-label" for="Languages">Languages</label></p>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="1" id="Languages_0" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_0">Italian</label>
<input type="checkbox" value="2" id="Languages_1" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_1">French</label>
<input type="checkbox" value="3" id="Languages_2" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_2">English</label>
<input type="checkbox" value="4" id="Languages_3" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_3">Spanish</label>
<input type="checkbox" value="5" id="Languages_4" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_4">German</label>
<input type="checkbox" value="6" id="Languages_5" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_5">Portuguese</label>
<input type="checkbox" value="7" id="Languages_6" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_6">Bulgarian</label>
<input type="checkbox" value="8" id="Languages_7" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_7">Latvian</label>
</div>
</div>
</div>
</div>
I attempted to use span3 for layout styling but encountered compatibility issues, particularly with IE. Check out the working example on JSFiddle here.