From 0caed940a578cb920a750dc0ce287c7d71e59a3e Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Sun, 24 Nov 2019 13:15:35 -0600
Subject: [PATCH] Set vertical-align on .form-check-input (#29521)

This is a follow-up to #29322, specifically "allowing easy placement of
the `.form-check-input` in more places."  In my testing in Firefox and
Chrome, setting `vertical-align: top` removes the need to add
`float-left` to vertically align the checkbox and label text.  And doing
so does not visually affect examples which do apply `float: left` via
nesting in a `.form-check`.
---
 scss/forms/_form-check.scss                   |  1 +
 .../content/docs/4.3/components/list-group.md | 20 +++++++++----------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index d3aaf058b9..c4837f83b6 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -18,6 +18,7 @@
   width: $form-check-input-width;
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
+  vertical-align: top;
   background-color: $form-check-input-bg;
   border: $form-check-input-border;
   appearance: none;
diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md
index 2599641ea2..a9bb3acd22 100644
--- a/site/content/docs/4.3/components/list-group.md
+++ b/site/content/docs/4.3/components/list-group.md
@@ -205,23 +205,23 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
 {{< example >}}
 <ul class="list-group">
   <li class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    <input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    <input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    <input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
     Morbi leo risus
   </li>
   <li class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    <input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
     Porta ac consectetur ac
   </li>
   <li class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="" aria-label="...">
+    <input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
     Vestibulum at eros
   </li>
 </ul>
@@ -232,23 +232,23 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
 {{< example >}}
 <div class="list-group">
   <label class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    <input class="form-check-input mr-1" type="checkbox" value="">
     Cras justo odio
   </label>
   <label class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    <input class="form-check-input mr-1" type="checkbox" value="">
     Dapibus ac facilisis in
   </label>
   <label class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    <input class="form-check-input mr-1" type="checkbox" value="">
     Morbi leo risus
   </label>
   <label class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    <input class="form-check-input mr-1" type="checkbox" value="">
     Porta ac consectetur ac
   </label>
   <label class="list-group-item">
-    <input class="form-check-input float-left mr-2" type="checkbox" value="">
+    <input class="form-check-input mr-1" type="checkbox" value="">
     Vestibulum at eros
   </label>
 </div>