Bootstrap Ornaments

Collection of CSS only switches for checkboxes and radios and other fun components

View the Project on GitHub osahan/BootstrapOrnaments

Download ZIP File Download TAR Ball View On GitHub

Checkboxes & Radio Buttons

Toggleable CSS only switches, simply add classes and data attributes.

Example

Default Style: Use the .switch class on <label> element assigned to Checkbox.

Use any of the available switch classes to quickly create a styled switch.
Primary .switch-primary, Success .switch-success, Info .switch-info, Warning .switch-warning, Danger .switch-danger,

To add "ON / OFF" label, add data-on="ON" and data-off="OFF" to <label> element.

<div>
  <input type="checkbox" name="test" id="chkbox" class="a11y">
  <label for="chkbox" class="switch switch-primary" data-on="ON" data-off="OFF">
</div>

Rounded Corners: Use the .switch .switch-round class on <label> element assigned to Checkbox

To add "ON / OFF" label, add data-on="ON" and data-off="OFF" to <label> element. 

<div>
  <input type="checkbox" name="test" id="chkbox" class="a11y">
  <label for="chkbox" class="switch  switch-round switch-primary" data-on="ON" data-off="OFF">
</div>

Switch with no label: Remove data-on="ON" and data-off="OFF" from <label> element

<div>
  <input type="checkbox" name="test" id="chkbox" class="a11y">
  <label for="chkbox" class="switch switch-success">
</div>

<div>
  <input type="checkbox" name="test" id="chkbox" class="a11y">
  <label for="chkbox" class="switch switch-round switch-success">
</div>

Licensed under The MIT License (MIT) · This project is maintained by Osahan · Hosted on GitHub Pages