Adjust demo page small toggles examples

Author: nickvasdev

dist/shards-demo.html

@@ -373,7 +373,7 @@ <h5 class="mb-4 w-100">Custom Controls</h5>
  </div>
 
  <div class="row mb-5">
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-0">
+ <div class="custom-controls-example col-md-3 col-sm-3 col-xs-12 pl-0">
  <h6 class="text-muted mb-2">Checkboxes</h6>
  <fieldset>
  <div class="custom-control custom-checkbox d-block my-2">
@@ -403,7 +403,7 @@ <h6 class="text-muted mb-2">Checkboxes</h6>
  </div>
  </fieldset>
  </div>
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12">
+ <div class="custom-controls-example col-md-3 col-sm-3 col-xs-12">
  <h6 class="text-muted mb-2">Radio Buttons</h6>
  <fieldset>
  <div class="custom-control custom-radio d-block my-2">
@@ -433,7 +433,7 @@ <h6 class="text-muted mb-2">Radio Buttons</h6>
  </div>
  </fieldset>
  </div>
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-4">
+ <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-5">
  <h6 class="text-muted mb-1">Toggles</h6>
  <fieldset>
  <div class="custom-control custom-toggle d-block my-2">
@@ -463,28 +463,38 @@ <h6 class="text-muted mb-1">Toggles</h6>
  </div>
  </fieldset>
  </div>
- </div>
-
- <div class="row mb-5">
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-0">
- <h6 class="text-muted mb-1">Toggles Size Variation</h6>
+ <div class="custom-controls-example col-md-2 col-sm-2 col-xs-12 pl-3">
+ <h6 class="text-muted mb-1">Sizes</h6>
 
  <fieldset>
  <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
  <input type="checkbox" id="customToggle1sm" name="customToggle1sm" class="custom-control-input">
- <label class="custom-control-label" for="customToggle1sm">Rockets Small</label>
+ <label class="custom-control-label" for="customToggle1sm">Rockets</label>
  </div>
  </fieldset>
 
  <fieldset>
  <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
  <input type="checkbox" id="customToggle2sm" name="customToggle2sm" class="custom-control-input" checked>
- <label class="custom-control-label" for="customToggle2sm">Lasers Small</label>
+ <label class="custom-control-label" for="customToggle2sm">Lasers</label>
+ </div>
+ </fieldset>
+
+ <fieldset disabled>
+ <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
+ <input type="checkbox" id="customToggle3" name="customToggle3" class="custom-control-input">
+ <label class="custom-control-label" for="customToggle3">HAL</label>
+ </div>
+ </fieldset>
+
+ <fieldset disabled>
+ <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
+ <input type="checkbox" id="customToggle4" name="customToggle4" class="custom-control-input" checked>
+ <label class="custom-control-label" for="customToggle4">Ultron</label>
  </div>
  </fieldset>
  </div>
  </div>
-
  <div class="row mb-5">
  <div class="col-md-6 pl-0 custom-dropdown-example">
  <h6 class="text-muted mb-3">Custom Dropdown</h6>

src/extras/shards-demo.html

@@ -373,7 +373,7 @@ <h5 class="mb-4 w-100">Custom Controls</h5>
  </div>
 
  <div class="row mb-5">
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-0">
+ <div class="custom-controls-example col-md-3 col-sm-3 col-xs-12 pl-0">
  <h6 class="text-muted mb-2">Checkboxes</h6>
  <fieldset>
  <div class="custom-control custom-checkbox d-block my-2">
@@ -403,7 +403,7 @@ <h6 class="text-muted mb-2">Checkboxes</h6>
  </div>
  </fieldset>
  </div>
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12">
+ <div class="custom-controls-example col-md-3 col-sm-3 col-xs-12">
  <h6 class="text-muted mb-2">Radio Buttons</h6>
  <fieldset>
  <div class="custom-control custom-radio d-block my-2">
@@ -433,7 +433,7 @@ <h6 class="text-muted mb-2">Radio Buttons</h6>
  </div>
  </fieldset>
  </div>
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-4">
+ <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-5">
  <h6 class="text-muted mb-1">Toggles</h6>
  <fieldset>
  <div class="custom-control custom-toggle d-block my-2">
@@ -463,28 +463,38 @@ <h6 class="text-muted mb-1">Toggles</h6>
  </div>
  </fieldset>
  </div>
- </div>
-
- <div class="row mb-5">
- <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-0">
- <h6 class="text-muted mb-1">Toggles Size Variation</h6>
+ <div class="custom-controls-example col-md-2 col-sm-2 col-xs-12 pl-3">
+ <h6 class="text-muted mb-1">Sizes</h6>
 
  <fieldset>
  <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
  <input type="checkbox" id="customToggle1sm" name="customToggle1sm" class="custom-control-input">
- <label class="custom-control-label" for="customToggle1sm">Rockets Small</label>
+ <label class="custom-control-label" for="customToggle1sm">Rockets</label>
  </div>
  </fieldset>
 
  <fieldset>
  <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
  <input type="checkbox" id="customToggle2sm" name="customToggle2sm" class="custom-control-input" checked>
- <label class="custom-control-label" for="customToggle2sm">Lasers Small</label>
+ <label class="custom-control-label" for="customToggle2sm">Lasers</label>
+ </div>
+ </fieldset>
+
+ <fieldset disabled>
+ <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
+ <input type="checkbox" id="customToggle3" name="customToggle3" class="custom-control-input">
+ <label class="custom-control-label" for="customToggle3">HAL</label>
+ </div>
+ </fieldset>
+
+ <fieldset disabled>
+ <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
+ <input type="checkbox" id="customToggle4" name="customToggle4" class="custom-control-input" checked>
+ <label class="custom-control-label" for="customToggle4">Ultron</label>
  </div>
  </fieldset>
  </div>
  </div>
-
  <div class="row mb-5">
  <div class="col-md-6 pl-0 custom-dropdown-example">
  <h6 class="text-muted mb-3">Custom Dropdown</h6>