v4: Various flexbox fixes and updates

docs/_data/breakpoints.yml

@@ -0,0 +1,29 @@
+- breakpoint: xs
+  abbr: ""
+  name: Extra small
+  min-width: 0px
+  container: ""
+
+- breakpoint: sm
+  abbr: -sm
+  name: Small
+  min-width: 576px
+  container: 540px
+
+- breakpoint: md
+  abbr: -md
+  name: Medium
+  min-width: 768px
+  container: 720px
+
+- breakpoint: lg
+  abbr: -lg
+  name: Large
+  min-width: 992px
+  container: 960px
+
+- breakpoint: xl
+  abbr: -xl
+  name: Extra large
+  min-width: 1200px
+  container: 1140px

docs/_data/nav.yml

@@ -56,6 +56,7 @@
     - title: Clearfix
     - title: Close icon
     - title: Colors
+    - title: Flexbox
     - title: Display property
     - title: Image replacement
     - title: Invisible content

docs/_includes/nav-home.html

@@ -25,7 +25,7 @@
     </nav>
     {% endcomment %}
 
-    <div class="d-flex flex-items-between hidden-lg-up">
+    <div class="d-flex justify-content-between hidden-lg-up">
       <a class="navbar-brand" href="{{ site.baseurl }}/">
         Bootstrap
       </a>

docs/assets/scss/_component-examples.scss

@@ -43,6 +43,11 @@
   background-color: rgba(255,0,0,.1);
 }
 
+.bd-highlight {
+  background-color: rgba($bd-purple, .15);
+  border: 1px solid rgba($bd-purple, .15);
+}
+
 
 //
 // Container illustrations
@@ -236,21 +241,23 @@
 
 // Example modals
 .bd-example-modal {
-  background-color: #f5f5f5;
-}
-.bd-example-modal .modal {
-  position: relative;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
-  z-index: 1;
-  display: block;
-}
-.bd-example-modal .modal-dialog {
-  left: auto;
-  margin-right: auto;
-  margin-left: auto;
+  background-color: #fafafa;
+
+  .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+  }
+
+  .modal-dialog {
+    left: auto;
+    margin-right: auto;
+    margin-left: auto;
+  }
 }
 
 // Example dropdowns

docs/components/forms.md

@@ -275,7 +275,7 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
 
 Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
 
-- Controls are `display: inline-block` (or `flex` when enabled) to provide alignment control via `vertical-align` and `margin`. Those also means you'll have some HTML character spaces between elements by default.
+- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/utilities/flexbox/) utilities.
 - Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
 - Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
 

docs/components/list-group.md

@@ -27,19 +27,19 @@ The most basic list group is simply an unordered list with list items, and the p
 
 ## Badge
 
-Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
+Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`justify-content-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
 
 {% highlight html %}
 <ul class="list-group">
-  <li class="list-group-item flex-items-between">
+  <li class="list-group-item justify-content-between">
     Cras justo odio
     <span class="badge badge-default badge-pill">14</span>
   </li>
-  <li class="list-group-item flex-items-between">
+  <li class="list-group-item justify-content-between">
     Dapibus ac facilisis in
     <span class="badge badge-default badge-pill">2</span>
   </li>
-  <li class="list-group-item flex-items-between">
+  <li class="list-group-item justify-content-between">
     Morbi leo risus
     <span class="badge badge-default badge-pill">1</span>
   </li>

docs/components/navbar.md

@@ -57,9 +57,9 @@ Here's an example of all the sub-components included in a responsive light-theme
         <a class="nav-link disabled" href="#">Disabled</a>
       </li>
     </ul>
-    <form class="form-inline mt-2 mt-md-0">
-      <input class="form-control mr-md-2" type="text" placeholder="Search">
-      <button class="btn btn-outline-success my-2 my-lg-0" type="submit">Search</button>
+    <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="text" placeholder="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
   </div>
 </nav>
@@ -193,19 +193,19 @@ Place various form controls and components within a navbar with `.form-inline`.
 {% example html %}
 <nav class="navbar navbar-light bg-faded">
   <form class="form-inline">
-    <input class="form-control mr-md-2" type="text" placeholder="Search">
-    <button class="btn btn-outline-success my-2 my-lg-0" type="submit">Search</button>
+    <input class="form-control mr-sm-2" type="text" placeholder="Search">
+    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </nav>
 {% endexample %}
 
 Align the contents of your inline forms with utilities as needed.
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded flex-items-right">
+<nav class="navbar navbar-light bg-faded justify-content-end">
   <form class="form-inline">
-    <input class="form-control mr-md-2" type="text" placeholder="Search">
-    <button class="btn btn-outline-success my-2 my-lg-0" type="submit">Search</button>
+    <input class="form-control mr-sm-2" type="text" placeholder="Search">
+    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </nav>
 {% endexample %}
@@ -300,8 +300,8 @@ Theming the navbar has never been easier thanks to the combination of theming cl
         </li>
       </ul>
       <form class="form-inline">
-        <input class="form-control mr-md-2" type="text" placeholder="Search">
-        <button class="btn btn-outline-info my-2 my-lg-0" type="submit">Search</button>
+        <input class="form-control mr-sm-2" type="text" placeholder="Search">
+        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
   </nav>
@@ -328,8 +328,8 @@ Theming the navbar has never been easier thanks to the combination of theming cl
         </li>
       </ul>
       <form class="form-inline">
-        <input class="form-control mr-md-2" type="text" placeholder="Search">
-        <button class="btn btn-outline-secondary my-2 my-lg-0" type="submit">Search</button>
+        <input class="form-control mr-sm-2" type="text" placeholder="Search">
+        <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
   </nav>
@@ -356,8 +356,8 @@ Theming the navbar has never been easier thanks to the combination of theming cl
         </li>
       </ul>
       <form class="form-inline">
-        <input class="form-control mr-md-2" type="text" placeholder="Search">
-        <button class="btn btn-outline-primary my-2 my-lg-0" type="submit">Search</button>
+        <input class="form-control mr-sm-2" type="text" placeholder="Search">
+        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
   </nav>
@@ -449,9 +449,9 @@ With no `.navbar-brand` shown in lowest breakpoint:
         <a class="nav-link disabled" href="#">Disabled</a>
       </li>
     </ul>
-    <form class="form-inline mt-2 mt-lg-0">
-      <input class="form-control mr-md-2" type="text" placeholder="Search">
-      <button class="btn btn-outline-success my-2 my-lg-0" type="submit">Search</button>
+    <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="text" placeholder="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
   </div>
 </nav>
@@ -478,9 +478,9 @@ With a brand name shown on the left and toggler on the right:
         <a class="nav-link disabled" href="#">Disabled</a>
       </li>
     </ul>
-    <form class="form-inline mt-2 mt-lg-0">
-      <input class="form-control mr-md-2" type="text" placeholder="Search">
-      <button class="btn btn-outline-success my-2 my-lg-0" type="submit">Search</button>
+    <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="text" placeholder="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
   </div>
 </nav>