v4: Custom checkbox and radio alignment (#20671)

* Allow text of custom form labels to wrap like the default ones
* Switch from using after to force line breaks to float/clear combo in stacked custom forms

1 files changed, 4 insertions, 9 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index a5f0bdfc4..fe30f9fad 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -11,7 +11,7 @@
 
 .custom-control {
   position: relative;
-  display: inline;
+  display: inline-block;
   padding-left: $custom-control-gutter;
   cursor: pointer;
 
@@ -61,7 +61,7 @@
 
 .custom-control-indicator {
   position: absolute;
-  top: .0625rem;
+  top: .25rem;
   left: 0;
   display: block;
   width: $custom-control-indicator-size;
@@ -117,13 +117,8 @@
 
 .custom-controls-stacked {
   .custom-control {
-    display: inline;
-
-    &::after {
-      display: block;
-      margin-bottom: $custom-control-spacer-y;
-      content: "";
-    }
+    float: left;
+    clear: left;
 
     + .custom-control {
       margin-left: 0;