Update inline forms (updated docs and new flexbox styles) (#21212)

* fix form-inline with flex enabled
* grunt
* fix alignment of labels
* shorter if syntax
* add new form example to docs for now
* update inline form docs usage guidelines
* responsive margins
* better margin utils
* fix sizing of .form-check
* flexbox alignment of .form-check
* no need to change direction
* support custom controls in inline form, for default and flex modes
* add example of custom select and checks to docs
* remove hidden and visible label variants since we cover that in the usage guidelines at the start and include hidden labels everywhere
* use property value instead of layout name
* apply to all labels
* add a visible label, space it out
* add id

1 files changed, 21 insertions, 12 deletions

diff --git a/dist/css/bootstrap-flex.css b/dist/css/bootstrap-flex.css
index f60a936d8..82c2dd667 100644
--- a/dist/css/bootstrap-flex.css
+++ b/dist/css/bootstrap-flex.css
@@ -2565,11 +2565,30 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
 }
 
+.form-inline {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+}
+
 @media (min-width: 576px) {
   .form-inline .form-group {
-    display: inline-block;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
     margin-bottom: 0;
-    vertical-align: middle;
   }
   .form-inline .form-control {
     display: inline-block;
@@ -2580,18 +2599,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     display: inline-block;
   }
   .form-inline .input-group {
-    display: inline-table;
-    width: auto;
-    vertical-align: middle;
-  }
-  .form-inline .input-group .input-group-addon,
-  .form-inline .input-group .input-group-btn,
-  .form-inline .input-group .form-control {
     width: auto;
   }
-  .form-inline .input-group > .form-control {
-    width: 100%;
-  }
   .form-inline .form-control-label {
     margin-bottom: 0;
     vertical-align: middle;