bsformcontrols4/wiki/USAGE.md

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>