v4: Grid redux

docs/_data/nav.yml

@@ -15,6 +15,7 @@
   pages:
     - title: Overview
     - title: Grid
+    - title: Flexbox grid
     - title: Media object
     - title: Responsive utilities
 

docs/_layouts/docs.html

@@ -21,10 +21,10 @@
 
     <div class="container">
       <div class="row">
-        <div class="col-md-3 col-md-push-9 bd-sidebar">
+        <div class="col-md-3 push-md-9 bd-sidebar">
           {% include nav-docs.html %}
         </div>
-        <div class="col-md-9 col-md-pull-3 bd-content">
+        <div class="col-md-9 pull-md-3 bd-content">
           <h1 class="bd-title" id="content">{{ page.title }}</h1>
           {{ content }}
         </div>

docs/assets/scss/_component-examples.scss

@@ -3,16 +3,31 @@
 //
 
 .bd-example-row {
-  .row {
-    margin-bottom: 1rem;
+  .row + .row {
+    margin-top: 1rem;
+  }
 
+  .row {
+    > .col,
     > [class^="col-"] {
       padding-top: .75rem;
       padding-bottom: .75rem;
       background-color: rgba(86,61,124,.15);
       border: 1px solid rgba(86,61,124,.2);
     }
   }
+
+  .flex-items-xs-top,
+  .flex-items-xs-middle,
+  .flex-items-xs-bottom {
+    min-height: 6rem;
+    background-color: rgba(255,0,0,.1);
+  }
+}
+
+.bd-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(255,0,0,.1);
 }
 
 

docs/examples/blog/index.html

@@ -111,7 +111,7 @@ <h2 class="blog-post-title">New feature</h2>
 
         </div><!-- /.blog-main -->
 
-        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
+        <div class="col-sm-3 offset-sm-1 blog-sidebar">
           <div class="sidebar-module sidebar-module-inset">
             <h4>About</h4>
             <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>

docs/examples/carousel/index.html

@@ -136,11 +136,11 @@ <h2 class="featurette-heading">First featurette heading. <span class="text-muted
       <hr class="featurette-divider">
 
       <div class="row featurette">
-        <div class="col-md-7 col-md-push-5">
+        <div class="col-md-7 push-md-5">
           <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
-        <div class="col-md-5 col-md-pull-7">
+        <div class="col-md-5 pull-md-7">
           <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>

docs/examples/dashboard/index.html

@@ -63,7 +63,7 @@
             <li><a href="">Another nav item</a></li>
           </ul>
         </div>
-        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+        <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
           <h1 class="page-header">Dashboard</h1>
 
           <div class="row placeholders">

docs/examples/grid/index.html

@@ -159,11 +159,11 @@ <h3>Offset, push, and pull resets</h3>
       <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
       <div class="row">
         <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
-        <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+        <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
       </div>
       <div class="row">
         <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
-        <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
+        <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
       </div>
 
 

docs/layout/flexbox-grid.md

@@ -0,0 +1,194 @@
+---
+layout: docs
+title: Flexbox grid system
+group: layout
+---
+
+Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content.
+
+Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
+
+{% callout warning %}
+**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled.
+{% endcallout %}
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## How it works
+
+The flexbox grid system behaves similar to our default grid system, but with a few notable differences:
+
+- [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise.
+- Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system.
+- Flexbox grid columns without a set width will automatically layout with even widths. For example, four columns will each automatically be 25% wide.
+- Flexbox grid columns have significantly more alignment options available, including vertical alignment.
+
+Chill? Awesome—keep reading for more information and some code snippets.
+
+## Auto-layout columns
+
+As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col-*`s for each breakpoint you need and you're good to go.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row">
+    <div class="col-xs">
+      One of two columns
+    </div>
+    <div class="col-xs">
+      One of two columns
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
+
+Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row">
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs-6">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+  </div>
+</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-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-middle">
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-bottom">
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      One of three columns
+    </div>
+    <div class="col-xs">
+      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-xs flex-xs-top">
+      One of three columns
+    </div>
+    <div class="col-xs flex-xs-middle">
+      One of three columns
+    </div>
+    <div class="col-xs flex-xs-bottom">
+      One of three columns
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
+
+## Horizontal alignment
+
+Flexbox utilities for horizontal alignment also exist for a number of layout options.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row flex-items-xs-left">
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-center">
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-right">
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-around">
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+  </div>
+  <div class="row flex-items-xs-between">
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+    <div class="col-xs-4">
+      One of two columns
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>