From e22b0df8b22c0abf49782f19235b8894301bb8ce Mon Sep 17 00:00:00 2001
From: Alan Mooiman <amooiman@gmail.com>
Date: Thu, 20 Oct 2016 12:59:42 -0400
Subject: [PATCH 1/2] Create col class for auto flexbox columns

.col-xs-auto, .col-sm-auto, etc.
---
 scss/mixins/_grid-framework.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 35ccd9221e..5d79174893 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -40,6 +40,10 @@
           flex-grow: 1;
           max-width: 100%;
         }
+       .col-#{$breakpoint}-auto {
+          flex: 0 0 auto;
+          width: auto;
+        }
       }
 
       @for $i from 1 through $columns {

From 4538ac9b56e6390b4b4ca745dc749195859cb8f3 Mon Sep 17 00:00:00 2001
From: Alan Mooiman <amooiman@gmail.com>
Date: Mon, 24 Oct 2016 11:23:56 -0400
Subject: [PATCH 2/2] Add documentation for col-{breakpoint}-auto

---
 docs/layout/flexbox-grid.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 80db93c934..6fa04bf888 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -91,6 +91,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 {% endexample %}
 </div>
 
+Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row flex-items-md-center">
+    <div class="col-xs col-lg-2">
+      1 of 3
+    </div>
+    <div class="col-xs-12 col-md-auto">
+      Variable width content
+    </div>
+    <div class="col-xs col-lg-2">
+      3 of 3
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-xs">
+      1 of 3
+    </div>
+    <div class="col-xs-12 col-md-auto">
+      Variable width content
+    </div>
+    <div class="col-xs col-lg-2">
+      3 of 3
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
+
 ## Responsive flexbox
 
 Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.