src/index.html

@@ -1691,15 +1691,11 @@
               <hr>
               <div class="row">
                 <div class="col-md-6">
-                  <label class="form-check-label" for="work_travel">This is a checkbox.</label>
                   <div class="form-check">
-                    <input class="form-check-input" id="work_travel" name="work_travel" placeholder="Are you available to travel?" type="checkbox">
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <label for="work_online">This one has form-group</label>
-                  <div class="form-group">
-                    <input checked="" class="form-control" id="work_online" name="work_online" placeholder="Are you available to travel?" type="checkbox">
+                    <input class="form-check-input" id="default_checkbox" type="checkbox" value="">
+                    <label class="form-check-label" for="default_checkbox">
+                      Default checkbox
+                    </label>
                   </div>
                 </div>
               </div>

src/styles/_forms.sass

@@ -13,7 +13,6 @@
   .input-group-addon
     border-color: var(--color-danger)
 
-
 .form-text, .helptext
   color: var(--color-text-secondary)
   font-size: var(--fs-sm)
@@ -27,6 +26,7 @@
   &:focus
     border-color: var(--color-accent)
 
+  // TODO: check if using form-control with checkbox and radio is a real use case
   &[type="checkbox"],
   &[type="radio"]
     height: var(--spacer)
@@ -201,6 +201,25 @@ select
     &:hover
       cursor: pointer
 
+// Checkboxes and radios Bootstrap overrides
+// TODO: remove overrides when cleaning up Bootstrap deprecated partials
+.form-check,
+.form-check-input
+  position: static
+
+.form-check
+  line-height: var(--lh-sm)
+  +padding(0, left)
+
+.form-check-input
+  +margin(0, left)
+  +margin(1, right)
+  +margin(0, top)
+
+.form-check-label
+  &:hover
+    cursor: pointer
+
 [type="checkbox"],
 [type="radio"]
   height: var(--spacer)
@@ -210,4 +229,3 @@ select
 [type="checkbox"]
   &:hover
     cursor: pointer
-