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`.

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index d3aaf058b9dfd0aa864e3b53aa0d0ef2d1209119..c4837f83b6812c75903a2a48dad093ddf6cba27a 100644 (file)
--- 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 2599641ea2ad305b28cc88778ae349a47b2d8cb3..a9bb3acd22284fe7077e57741db3b0d9ba754cd5 100644 (file)
--- 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>