Checkbox
Basic Checkbox
<form class="form">
<div class="form-group">
<label>Default Checkboxes</label>
<div class="checkbox-list">
<label class="checkbox">
<input type="checkbox"/> Default
<span></span>
</label>
<label class="checkbox checkbox-disabled">
<input type="checkbox" disabled="disabled" checked="checked"/> Disabled
<span></span>
</label>
<label class="checkbox">
<input type="checkbox" checked="checked"/> Checked
<span></span>
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes</label>
<div class="checkbox-inline">
<label class="checkbox">
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox">
<input type="checkbox"/> Option 2
<span></span>
</label>
<label class="checkbox">
<input type="checkbox"/> Option 3
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Inline Checkboxes</label>
<div class="checkbox-inline">
<label class="checkbox">
<input type="checkbox" checked="checked"/> Option 1
<span></span>
</label>
<label class="checkbox">
<input type="checkbox"/> Option 2
<span></span>
</label>
<label class="checkbox">
<input type="checkbox" checked="checked"/> Option 3
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Single Checkbox</label>
<div class="checkbox-single">
<label class="checkbox">
<input type="checkbox" checked="checked"/> Option
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</form>
Horizontal Form
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">Checkboxes</label>
<div class="col-9 col-form-label">
<div class="checkbox-list">
<label class="checkbox">
<input type="checkbox"/> Default
<span></span>
</label>
<label class="checkbox">
<input type="checkbox" checked="checked"/> Checked
<span></span>
</label>
<label class="checkbox checkbox-disabled">
<input type="checkbox" disabled> Disabled
<span></span>
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Inline Checkboxes</label>
<div class="col-9 col-form-label">
<div class="checkbox-inline">
<label class="checkbox">
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox">
<input type="checkbox"/> Option 2
<span></span>
</label>
<label class="checkbox">
<input type="checkbox"/> Option 3
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Inline Checkboxes</label>
<div class="col-9 col-form-label">
<div class="checkbox-inline">
<label class="checkbox" cheched>
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox">
<input type="checkbox" checked="checked"/> Option 2
<span></span>
</label>
<label class="checkbox">
<input type="checkbox"/> Option 3
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
Color & Style Options
<form class="form">
<div class="form-group">
<label>Color options:</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-primary">
<input type="checkbox" checked="checked"/> Primary
<span></span>
</label>
<label class="checkbox checkbox-success">
<input type="checkbox" checked="checked"/> Success
<span></span>
</label>
<label class="checkbox checkbox-danger">
<input type="checkbox" checked="checked"/> Danger
<span></span>
</label>
<label class="checkbox checkbox-warning">
<input type="checkbox" checked="checked"/> Warning
<span></span>
</label>
<label class="checkbox checkbox-info">
<input type="checkbox" checked="checked"/> Info
<span></span>
</label>
<label class="checkbox checkbox-dark">
<input type="checkbox" checked="checked"/> Dark
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Default Style:</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-success">
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox checkbox-success">
<input type="checkbox" checked="checked"/> Option 2
<span></span>
</label>
<label class="checkbox checkbox-primary">
<input type="checkbox" checked="checked"/> Option 3
<span></span>
</label>
<label class="checkbox checkbox-warning checkbox-disabled">
<input type="checkbox" disabled> Disabled
<span></span>
</label>
<label class="checkbox checkbox-danger checkbox-disabled">
<input type="checkbox" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Square Style:</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-square checkbox-success">
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox checkbox-square checkbox-success">
<input type="checkbox" checked="checked"/> Option 2
<span></span>
</label>
<label class="checkbox checkbox-square checkbox-primary">
<input type="checkbox" checked="checked"/> Option 3
<span></span>
</label>
<label class="checkbox checkbox-square checkbox-warning checkbox-disabled">
<input type="checkbox" disabled> Disabled
<span></span>
</label>
<label class="checkbox checkbox-square checkbox-danger checkbox-disabled">
<input type="checkbox" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Circle Style:</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-circle checkbox-success">
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox checkbox-circle checkbox-success">
<input type="checkbox" checked="checked"/> Option 2
<span></span>
</label>
<label class="checkbox checkbox-circle checkbox-primary">
<input type="checkbox" checked="checked"/> Option 3
<span></span>
</label>
<label class="checkbox checkbox-circle checkbox-warning checkbox-disabled">
<input type="checkbox" disabled> Disabled
<span></span>
</label>
<label class="checkbox checkbox-circle checkbox-danger checkbox-disabled">
<input type="checkbox" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Outline Style:</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-outline checkbox-success">
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-success">
<input type="checkbox" checked="checked"/> Option 2
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-primary">
<input type="checkbox" checked="checked"/> Option 3
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-warning checkbox-disabled">
<input type="checkbox" disabled> Disabled
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-danger checkbox-disabled">
<input type="checkbox" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="separator separator-dashed mt-4 mb-4"></div>
<div class="form-group">
<label>Outline 2x Style:</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-success">
<input type="checkbox"/> Option 1
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-success">
<input type="checkbox" checked="checked"/> Option 2
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
<input type="checkbox" checked="checked"/> Option 3
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-warning checkbox-disabled">
<input type="checkbox" disabled> Disabled
<span></span>
</label>
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-danger checkbox-disabled">
<input type="checkbox" disabled="disabled" checked="checked"/> Disabled & checked
<span></span>
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</form>
