Align checkboxes & radios

scss/_forms.scss

@@ -201,14 +201,11 @@ textarea.form-control {
 // Indent the labels to position radios/checkboxes as hanging controls.
 
 .form-check {
-  position: relative;
   display: block;
   padding-left: $form-check-input-gutter;
 }
 
 .form-check-input {
-  position: absolute;
-  margin-top: $form-check-input-margin-y;
   margin-left: -$form-check-input-gutter;
 
   // Use disabled attribute instead of :disabled pseudo-class
@@ -230,8 +227,6 @@ textarea.form-control {
 
   // Undo .form-check-input defaults and add some `margin-right`.
   .form-check-input {
-    position: static;
-    margin-top: 0;
     margin-right: $form-check-inline-input-margin-x;
     margin-left: 0;
   }

scss/_input-group.scss

@@ -113,12 +113,6 @@
   background-color: $input-group-addon-bg;
   border: $input-border-width solid $input-group-addon-border-color;
   @include border-radius($input-border-radius);
-
-  // Nuke default margins from checkboxes and radios to vertically center within.
-  input[type="radio"],
-  input[type="checkbox"] {
-    margin-top: 0;
-  }
 }
 
 

scss/_reboot.scss

@@ -405,10 +405,16 @@ button::-moz-focus-inner,
   border-style: none;
 }
 
+// Fix alignment for checkboxes and radios. We assume the line height is the same
+// as the line height of the body, but since there's no way to set the visual width
+// and height of a native checkbox or radio without altering the appearance, this
+// is the only workaround which works. The checkbox or radio will not be stretched,
+// but be displayed in the middle of its height.
 input[type="radio"],
 input[type="checkbox"] {
-  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
-  padding: 0; // 2. Remove the padding in IE 10-
+  // stylelint-disable-next-line length-zero-no-unit
+  height: $line-height-base + 0em;
+  vertical-align: top;
 }
 
 

scss/_variables.scss

@@ -521,7 +521,6 @@ $input-transition:                      border-color .15s ease-in-out, box-shado
 $form-text-margin-top:                  .25rem !default;
 
 $form-check-input-gutter:               1.25rem !default;
-$form-check-input-margin-y:             .3rem !default;
 $form-check-input-margin-x:             .25rem !default;
 
 $form-check-inline-margin-x:            .75rem !default;

site/content/docs/4.3/content/reboot.md

@@ -204,6 +204,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
 - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
 - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
 - `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
+- `<input type="checkbox">` & `<input type="radio">` are aligned based on the line-height of the body. Make sure to alter the `height` of these elements if your line height is altered in custom css.
 - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
 - `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.