From: Mark Otto <markdotto@gmail.com>
Date: Sat, 6 Feb 2016 09:30:11 +0000 (-0800)
Subject: Add vertical alignment docs for flexbox grid
X-Git-Tag: v4.0.0-alpha.3~312^2~22
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9a519bb7e33c65456aaaf401b6f90975309d416d;p=thirdparty%2Fbootstrap.git

Add vertical alignment docs for flexbox grid
---

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 4ccd37f486..00097c3cd5 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -69,3 +69,65 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 </div>
 {% endexample %}
 </div>
+
+## Vertical alignment
+
+Use the flexbox alignment utilities to vertically align columns.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row flex-items-xs-top">
+    <div class="col">
+      One of three columns
+    </div>
+    <div class="col">
+      One of three columns
+    </div>
+    <div class="col">
+      One of three columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-center">
+    <div class="col">
+      One of three columns
+    </div>
+    <div class="col">
+      One of three columns
+    </div>
+    <div class="col">
+      One of three columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-bottom">
+    <div class="col">
+      One of three columns
+    </div>
+    <div class="col">
+      One of three columns
+    </div>
+    <div class="col">
+      One of three columns
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
+
+<div class="bd-example-row bd-example-row-flex-cols">
+{% example html %}
+<div class="container">
+  <div class="row">
+    <div class="col flex-xs-top">
+      One of three columns
+    </div>
+    <div class="col flex-xs-center">
+      One of three columns
+    </div>
+    <div class="col flex-xs-bottom">
+      One of three columns
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>