From 8250bd1b2175fcab70401dcc987cee6054b25556 Mon Sep 17 00:00:00 2001
From: Brad Kent <bkfake-github@yahoo.com>
Date: Mon, 28 Nov 2016 22:56:49 -0600
Subject: [PATCH] Fix #20936 make inline checkbox/radio markup same as stacked
 (#20995)

* #20936 make inline checkbox/radio markup same as stacked

* tweak language and remove extra blank line in snippet
---
 docs/components/forms.md | 53 ++++++++++++++++++++++++----------------
 scss/_forms.scss         | 14 +++--------
 scss/mixins/_forms.scss  |  1 -
 3 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/docs/components/forms.md b/docs/components/forms.md
index dd3e0027f6..4cbf204121 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -152,8 +152,7 @@ Below is a complete list of the specific form controls supported by Bootstrap an
     <tr>
       <td class="text-nowrap">
 {% markdown %}
-`.form-check`<br>
-`.form-check-inline`
+`.form-check`
 {% endmarkdown %}
       </td>
       <td class="text-nowrap">
@@ -463,30 +462,42 @@ By default, any number of checkboxes and radios that are immediate sibling will
 
 ### Inline
 
-Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`.
+Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
 
 {% example html %}
-<label class="form-check-inline">
-  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
+  </label>
+</div>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
+  </label>
+</div>
+<div class="form-check form-check-inline disabled">
+  <label class="form-check-label">
+    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
+  </label>
+</div>
 {% endexample %}
 
 {% example html %}
-<label class="form-check-inline">
-  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
-</label>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+  </label>
+</div>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+  </label>
+</div>
+<div class="form-check form-check-inline disabled">
+  <label class="form-check-label">
+    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
+  </label>
+</div>
 {% endexample %}
 
 ### Without labels
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 5ea3963e42..87e5491219 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -235,21 +235,15 @@ select.form-control-lg {
 
 // Radios and checkboxes on same line
 .form-check-inline {
-  position: relative;
   display: inline-block;
-  padding-left: 1.25rem;
-  margin-bottom: 0; // Override default `<label>` bottom margin
-  vertical-align: middle;
-  cursor: pointer;
+
+  .form-check-label {
+    vertical-align: middle;
+  }
 
   + .form-check-inline {
     margin-left: .75rem;
   }
-
-  &.disabled {
-    color: $text-muted;
-    cursor: $cursor-disabled;
-  }
 }
 
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 280849536a..c8aea9669d 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -9,7 +9,6 @@
   .form-control-label,
   .col-form-label,
   .form-check-label,
-  .form-check-inline,
   .custom-control {
     color: $color;
   }