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, 2 insertions, 2 deletions

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 531a02965..d86305c65 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -2315,8 +2315,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 @media (min-width: 576px) {
   .form-inline .form-group {
     display: inline-block;
-    margin-bottom: 0;
     vertical-align: middle;
+    margin-bottom: 0;
   }
   .form-inline .form-control {
     display: inline-block;
@@ -2327,8 +2327,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;
+    display: inline-table;
     vertical-align: middle;
   }
   .form-inline .input-group .input-group-addon,