3.0 KiB
Usage: v1.0.0.066
This is the usage guide for BSFormControls4, version 1.0.0.066.
Usage
Horizontal toggle switch
This horizontally-oriented toggle switch is actually just a checkbox. You can apply stock BS4 colours to the on and off positions using the classes below.
Colour Options
CSS class for colour in the off position: switch-off-primary, switch-off-success, switch-off-info, switch-off-warning, switch-off-danger and switch-off-muted.
CSS class for colour in the on position: switch-primary, switch-success, switch-info, switch-warning, switch-danger and switch-muted.
Size Options
We have the standard set of size options: switch-sm, switch-md and switch-lg.
Example
<div class="mb-3 row">
<label for="switch6" class="col-sm-4 col-form-label-sm">Toggle Switch</label>
<div class="col-sm-8">
<label class="switch switch-sm switch-primary">
<input id="switch6" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="mb-3 row">
<label for="switch2" class="col-sm-4 col-form-label">Toggle Switch</label>
<div class="col-sm-8">
<label class="switch switch-primary">
<input id="switch2" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="mb-3 row">
<label for="switch1" class="col-sm-4 col-form-label-lg">Toggle Switch</label>
<div class="col-sm-8">
<label class="switch switch-lg switch-primary">
<input id="switch1" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
Checkbox
This a style consistent checkbox.
Colour Options
CSS class for colour in the off position: chxbox-off-primary, chxbox-off-success, chxbox-off-info, chxbox-off-warning, chxbox-off-danger and chxbox-off-muted.
CSS class for colour in the off position: chxbox-primary, chxbox-success, chxbox-info, chxbox-warning, chxbox-danger and chxbox-muted.
Size Options
We have the standard set of size options: chxbox-sm, chxbox-md and chxbox-lg.
Example
<div class="mb-3 row">
<label for="checkbox1" class="col-sm-4 col-form-label-sm">Toggle Checkbox</label>
<div class="col-sm-8">
<label class="chxbox chxbox-sm">
<input id="checkbox1" type="checkbox" />
<span class="chxbox-slider"></span>
</label>
</div>
</div>
<div class="mb-3 row">
<label for="checkbox2" class="col-sm-4 col-form-label">Toggle Checkbox</label>
<div class="col-sm-8">
<label class="chxbox">
<input id="checkbox2" type="checkbox" />
<span class="chxbox-slider"></span>
</label>
</div>
</div>
<div class="mb-3 row">
<label for="checkbox3" class="col-sm-4 col-form-label-lg">Toggle Checkbox</label>
<div class="col-sm-8">
<label class="chxbox chxbox-lg">
<input id="checkbox3" type="checkbox" />
<span class="chxbox-slider"></span>
</label>
</div>
</div>