remove old flex utils, update docs to match

7 files changed, 21 insertions, 42 deletions

diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index e325d8605..3ba8520e0 100644
--- a/docs/_includes/nav-home.html
+++ b/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>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 1c1384724..0e06d3a7f 100644
--- a/docs/components/list-group.md
+++ b/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>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 57e0bad7a..2ee4c563f 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -202,7 +202,7 @@ Place various form controls and components within a navbar with `.form-inline`.
 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-sm-2" type="text" placeholder="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index 15a43ff50..05fc659bb 100644
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="navbar navbar-inverse bg-inverse">
-      <div class="container d-flex flex-items-between">
+      <div class="container d-flex justify-content-between">
         <a href="#" class="navbar-brand">Album</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index 913eaefbb..f12a9efe7 100644
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -30,7 +30,7 @@
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-toggleable-md" id="navbarCollapse">
-            <ul class="nav navbar-nav text-md-center flex-items-md-between">
+            <ul class="nav navbar-nav text-md-center justify-content-md-between">
               <li class="nav-item active">
                 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index d7391025f..efdf3a937 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -204,7 +204,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-md-center">
+  <div class="row justify-content-md-center">
     <div class="col col-lg-2">
       1 of 3
     </div>
@@ -304,10 +304,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Vertical alignment
 
-<div class="bd-example-row">
+<div class="bd-example-row bd-example-row-flex-cols">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-top">
+  <div class="row align-items-start">
     <div class="col">
       One of three columns
     </div>
@@ -318,7 +318,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-middle">
+  <div class="row align-items-center">
     <div class="col">
       One of three columns
     </div>
@@ -329,7 +329,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-bottom">
+  <div class="row align-items-end">
     <div class="col">
       One of three columns
     </div>
@@ -348,13 +348,13 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col flex-top">
+    <div class="col align-self-start">
       One of three columns
     </div>
-    <div class="col flex-middle">
+    <div class="col align-self-center">
       One of three columns
     </div>
-    <div class="col flex-bottom">
+    <div class="col align-self-end">
       One of three columns
     </div>
   </div>
@@ -367,7 +367,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-left">
+  <div class="row justify-content-start">
     <div class="col-4">
       One of two columns
     </div>
@@ -375,7 +375,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-center">
+  <div class="row justify-content-center">
     <div class="col-4">
       One of two columns
     </div>
@@ -383,7 +383,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-right">
+  <div class="row justify-content-end">
     <div class="col-4">
       One of two columns
     </div>
@@ -391,7 +391,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-around">
+  <div class="row justify-content-around">
     <div class="col-4">
       One of two columns
     </div>
@@ -399,7 +399,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-between">
+  <div class="row justify-content-between">
     <div class="col-4">
       One of two columns
     </div>
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 7eb01385e..93b666378 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -11,27 +11,6 @@
     .flex#{$infix}-last      { order: 1; }
     .flex#{$infix}-unordered { order: 0; }
 
-    // Alignment for every item
-    .flex-items#{$infix}-top    { align-items: flex-start; }
-    .flex-items#{$infix}-middle { align-items: center; }
-    .flex-items#{$infix}-bottom { align-items: flex-end; }
-
-    // Alignment per item
-    .flex#{$infix}-top    { align-self: flex-start; }
-    .flex#{$infix}-middle { align-self: center; }
-    .flex#{$infix}-bottom { align-self: flex-end; }
-
-    // Horizontal alignment of item
-    .flex-items#{$infix}-left    { justify-content: flex-start; }
-    .flex-items#{$infix}-center  { justify-content: center; }
-    .flex-items#{$infix}-right   { justify-content: flex-end; }
-    .flex-items#{$infix}-around  { justify-content: space-around; }
-    .flex-items#{$infix}-between { justify-content: space-between; }
-
-    //
-    // New flex utils to replace and extend the ones above
-    //
-
     .flex#{$infix}-fill { flex: 1 1 auto; }
     .flex#{$infix}-justify { flex: 1 1 100%; }