Checkbox
Basic checkbox
<div class="form-group">
<label>Default Checkboxes</label>
<div class="checkbox-list">
<label class="checkbox">
<input type="checkbox" name="Checkboxes1"/>
<span></span>
Default
</label>
<label class="checkbox checkbox-disabled">
<input type="checkbox" disabled="disabled" checked="checked" name="Checkboxes1"/>
<span></span>
Disabled
</label>
<label class="checkbox">
<input type="checkbox" checked="checked" name="Checkboxes1"/>
<span></span>
Checked
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes</label>
<div class="checkbox-inline">
<label class="checkbox">
<input type="checkbox" name="Checkboxes2"/>
<span></span>
Option 1
</label>
<label class="checkbox">
<input type="checkbox" name="Checkboxes2"/>
<span></span>
Option 2
</label>
<label class="checkbox">
<input type="checkbox" name="Checkboxes2"/>
<span></span>
Option 3
</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" name="Checkboxes3"/>
<span></span>
Option 1
</label>
<label class="checkbox">
<input type="checkbox" name="Checkboxes3"/>
<span></span>
Option 2
</label>
<label class="checkbox">
<input type="checkbox" checked="checked" name="Checkboxes3"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Large Size</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" name="Checkboxes3_1"/>
<span></span>
Option 1
</label>
<label class="checkbox checkbox-lg">
<input type="checkbox" name="Checkboxes3_1"/>
<span></span>
Option 2
</label>
<label class="checkbox checkbox-lg">
<input type="checkbox" name="Checkboxes3_1"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Square Style</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-square">
<input type="checkbox" checked="checked" name="Checkboxes13_1"/>
<span></span>
Option 1
</label>
<label class="checkbox checkbox-square">
<input type="checkbox" name="Checkboxes13_1"/>
<span></span>
Option 2
</label>
<label class="checkbox checkbox-square">
<input type="checkbox" name="Checkboxes13_1"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
<div class="form-group">
<label>Rounded Style</label>
<div class="checkbox-inline">
<label class="checkbox checkbox-rounded">
<input type="checkbox" checked="checked" name="Checkboxes15_1"/>
<span></span>
Option 1
</label>
<label class="checkbox checkbox-rounded">
<input type="checkbox" name="Checkboxes15_1"/>
<span></span>
Option 2
</label>
<label class="checkbox checkbox-rounded">
<input type="checkbox" name="Checkboxes15_1"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
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" name="Checkboxes4"/>
<span></span>
Default
</label>
<label class="checkbox">
<input type="checkbox" checked="checked" name="Checkboxes4"/>
<span></span>
Checked
</label>
<label class="checkbox checkbox-disabled">
<input type="checkbox" disabled="disabled" name="Checkboxes4"/>
<span></span>
Disabled
</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" name="Checkboxes5"/>
<span></span>
Option 1
</label>
<label class="checkbox">
<input type="checkbox" name="Checkboxes5"/>
<span></span>
Option 2
</label>
<label class="checkbox">
<input type="checkbox" name="Checkboxes5"/>
<span></span>
Option 3
</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">
<input type="checkbox" name="Checkboxes6"/>
<span></span>
Option 1
</label>
<label class="checkbox">
<input type="checkbox" checked="checked" name="Checkboxes6"/>
<span></span>
Option 2
</label>
<label class="checkbox">
<input type="checkbox" name="Checkboxes6"/>
<span></span>
Option 3
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
Theme Colors
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">Success State</label>
<div class="col-9 col-form-label">
<div class="checkbox-inline">
<label class="checkbox checkbox-success">
<input type="checkbox" name="Checkboxes5"/>
<span></span>
Default
</label>
<label class="checkbox checkbox-success">
<input type="checkbox" name="Checkboxes5" checked="checked" />
<span></span>
Checked
</label>
<label class="checkbox checkbox-success checkbox-disabled">
<input type="checkbox" name="Checkboxes5" disabled="disabled"/>
<span></span>
Disabled
</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">Primary State</label>
<div class="col-9 col-form-label">
<div class="checkbox-inline">
<label class="checkbox checkbox-primary">
<input type="checkbox" name="Checkboxes11"/>
<span></span>
Default
</label>
<label class="checkbox checkbox-primary">
<input type="checkbox" name="Checkboxes11" checked="checked" />
<span></span>
Checked
</label>
<label class="checkbox checkbox-primary checkbox-disabled">
<input type="checkbox" name="Checkboxes11" disabled="disabled"/>
<span></span>
Disabled
</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">Danger State</label>
<div class="col-9 col-form-label">
<div class="checkbox-inline">
<label class="checkbox checkbox-danger">
<input type="checkbox" name="Checkboxes12"/>
<span></span>
Default
</label>
<label class="checkbox checkbox-danger">
<input type="checkbox" name="Checkboxes12" checked="checked" />
<span></span>
Checked
</label>
<label class="checkbox checkbox-danger checkbox-disabled">
<input type="checkbox" name="Checkboxes12" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
Outline Type
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">Outline Default</label>
<div class="col-9 col-form-label">
<div class="checkbox-inline">
<label class="checkbox checkbox-outline checkbox-success">
<input type="checkbox" name="Checkboxes15"/>
<span></span>
Default
</label>
<label class="checkbox checkbox-outline checkbox-success">
<input type="checkbox" name="Checkboxes15" checked="checked" />
<span></span>
Checked
</label>
<label class="checkbox checkbox-outline checkbox-success checkbox-disabled">
<input type="checkbox" name="Checkboxes15" disabled="disabled"/>
<span></span>
Disabled
</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">Outline 2x</label>
<div class="col-9 col-form-label">
<div class="checkbox-inline">
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
<input type="checkbox" name="Checkboxes16"/>
<span></span>
Default
</label>
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
<input type="checkbox" name="Checkboxes16" checked="checked" />
<span></span>
Checked
</label>
<label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary checkbox-disabled">
<input type="checkbox" name="Checkboxes16" disabled="disabled"/>
<span></span>
Disabled
</label>
</div>
<span class="form-text text-muted">Some help text goes here</span>
</div>
</div>
</form>
