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: 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`.
---
 site/content/docs/4.3/components/list-group.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'site/content/docs')

diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md
index 2599641ea..a9bb3acd2 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>
-- 
cgit v1.2.3