flip things around again, no more base class, try out some new stuff to keep responsi...

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 92d95dca70fc585247e511bdaddd7d9154352189..e57dfdd3cc369ca1c071485b2672031ed16e1aa7 100644 (file)
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -21,10 +21,10 @@
 
     <div class="container">
       <div class="row">
-        <div class="col col-md-3 push-md-9 bd-sidebar">
+        <div class="col-md-3 push-md-9 bd-sidebar">
           {% include nav-docs.html %}
         </div>
-        <div class="col col-md-9 pull-md-3 bd-content">
+        <div class="col-md-9 pull-md-3 bd-content">
           <h1 class="bd-title" id="content">{{ page.title }}</h1>
           {{ content }}
         </div>

diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 79067275c1475a7d6ba8dd92bb5a4099c9fe5709..64ee929502cc3c49f9857cee24e54f63d8f89b28 100644 (file)
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -3,9 +3,11 @@
 //
 
 .bd-example-row {
-  .row {
-    margin-bottom: 1rem;
+  .row + .row {
+    margin-top: 1rem;
+  }
 
+  .row {
     > .col,
     > [class^="col-"] {
       padding-top: .75rem;

diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html
index 014e0a6c10e65c09b9e36f9cbba3650445dc7556..d4e9dbcc559d6fc2bb94581d4ff78e417c4c6544 100644 (file)
--- a/docs/examples/blog/index.html
+++ b/docs/examples/blog/index.html
@@ -43,7 +43,7 @@
 
       <div class="row">
 
-        <div class="col col-sm-8 blog-main">
+        <div class="col-sm-8 blog-main">
 
           <div class="blog-post">
             <h2 class="blog-post-title">Sample blog post</h2>
@@ -111,7 +111,7 @@
 
         </div><!-- /.blog-main -->
 
-        <div class="col col-sm-3 offset-sm-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>

diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index 55ecc1953b308912f61e0b2cde93c6abc43666ec..986c4e8a516dc08a2b5b080b6a2021d277aab14a 100644 (file)
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -98,19 +98,19 @@
 
       <!-- Three columns of text below the carousel -->
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
           <h2>Heading</h2>
           <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
           <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
         </div><!-- /.col-lg-4 -->
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
           <h2>Heading</h2>
           <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
           <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
         </div><!-- /.col-lg-4 -->
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
           <h2>Heading</h2>
           <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
@@ -124,11 +124,11 @@
       <hr class="featurette-divider">
 
       <div class="row featurette">
-        <div class="col col-md-7">
+        <div class="col-md-7">
           <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</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 col-md-5">
+        <div class="col-md-5">
           <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>
@@ -136,11 +136,11 @@
       <hr class="featurette-divider">
 
       <div class="row featurette">
-        <div class="col col-md-7 push-md-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 col-md-5 pull-md-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>
@@ -148,11 +148,11 @@
       <hr class="featurette-divider">
 
       <div class="row featurette">
-        <div class="col col-md-7">
+        <div class="col-md-7">
           <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</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 col-md-5">
+        <div class="col-md-5">
           <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>

diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index a956bd4113710e87071137ce17f856061e7ac5d8..65cc380cbcff75c9cc8b890e3ebae55b9a186136 100644 (file)
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -43,7 +43,7 @@
 
     <div class="container-fluid">
       <div class="row">
-        <div class="col col-sm-3 col-md-2 sidebar">
+        <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
             <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
             <li><a href="#">Reports</a></li>
@@ -63,26 +63,26 @@
             <li><a href="">Another nav item</a></li>
           </ul>
         </div>
-        <div class="col col-sm-9 offset-sm-3 col-md-10 offset-md-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">
-            <div class="col col-xs-6 col-sm-3 placeholder">
+            <div class="col-xs-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
-            <div class="col col-xs-6 col-sm-3 placeholder">
+            <div class="col-xs-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
-            <div class="col col-xs-6 col-sm-3 placeholder">
+            <div class="col-xs-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
-            <div class="col col-xs-6 col-sm-3 placeholder">
+            <div class="col-xs-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>

diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html
index c9bcf8b93f00ac6e14fd645469d827a26a12b59f..9e831115b40e9e3032d57ba5fe5bf2889db04774 100644 (file)
--- a/docs/examples/grid/index.html
+++ b/docs/examples/grid/index.html
@@ -30,56 +30,56 @@
       <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
 
 <div class="row">
-  <div class="col col-xs-4">.col .col-xs-4</div>
-  <div class="col col-xs-4">.col .col-xs-4</div>
-  <div class="col col-xs-4">.col .col-xs-4</div>
+  <div class="col-xs-4">.col-xs-4</div>
+  <div class="col-xs-4">.col-xs-4</div>
+  <div class="col-xs-4">.col-xs-4</div>
 </div>
 
 <div class="row">
-  <div class="col col-sm-4">.col .col-sm-4</div>
-  <div class="col col-sm-4">.col .col-sm-4</div>
-  <div class="col col-sm-4">.col .col-sm-4</div>
+  <div class="col-sm-4">.col-sm-4</div>
+  <div class="col-sm-4">.col-sm-4</div>
+  <div class="col-sm-4">.col-sm-4</div>
 </div>
 
 <div class="row">
-  <div class="col col-md-4">.col .col-md-4</div>
-  <div class="col col-md-4">.col .col-md-4</div>
-  <div class="col col-md-4">.col .col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
 </div>
 
 <div class="row">
-  <div class="col col-lg-4">.col .col-lg-4</div>
-  <div class="col col-lg-4">.col .col-lg-4</div>
-  <div class="col col-lg-4">.col .col-lg-4</div>
+  <div class="col-lg-4">.col-lg-4</div>
+  <div class="col-lg-4">.col-lg-4</div>
+  <div class="col-lg-4">.col-lg-4</div>
 </div>
 
 <div class="row">
-  <div class="col col-xl-4">.col .col-xl-4</div>
-  <div class="col col-xl-4">.col .col-xl-4</div>
-  <div class="col col-xl-4">.col .col-xl-4</div>
+  <div class="col-xl-4">.col-xl-4</div>
+  <div class="col-xl-4">.col-xl-4</div>
+  <div class="col-xl-4">.col-xl-4</div>
 </div>
 
       <h3>Three equal columns</h3>
       <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
       <div class="row">
-        <div class="col col-md-4">.col .col-md-4</div>
-        <div class="col col-md-4">.col .col-md-4</div>
-        <div class="col col-md-4">.col .col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
 
       <h3>Three unequal columns</h3>
       <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
       <div class="row">
-        <div class="col col-md-3">.col .col-md-3</div>
-        <div class="col col-md-6">.col .col-md-6</div>
-        <div class="col col-md-3">.col .col-md-3</div>
+        <div class="col-md-3">.col-md-3</div>
+        <div class="col-md-6">.col-md-6</div>
+        <div class="col-md-3">.col-md-3</div>
       </div>
 
       <h3>Two columns</h3>
       <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
       <div class="row">
-        <div class="col col-md-8">.col .col-md-8</div>
-        <div class="col col-md-4">.col .col-md-4</div>
+        <div class="col-md-8">.col-md-8</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
 
       <h3>Full width, single column</h3>
@@ -91,14 +91,14 @@
       <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
       <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
       <div class="row">
-        <div class="col col-md-8">
+        <div class="col-md-8">
           .col-md-8
           <div class="row">
-            <div class="col col-md-6">.col .col-md-6</div>
-            <div class="col col-md-6">.col .col-md-6</div>
+            <div class="col-md-6">.col-md-6</div>
+            <div class="col-md-6">.col-md-6</div>
           </div>
         </div>
-        <div class="col col-md-4">.col .col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
 
       <hr>
@@ -107,17 +107,17 @@
       <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
       <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
       <div class="row">
-        <div class="col col-xs-12 col-md-8">.col .col-xs-12 .col-md-8</div>
-        <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
+        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row">
-        <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
-        <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
-        <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row">
-        <div class="col col-xs-6">.col .col-xs-6</div>
-        <div class="col col-xs-6">.col .col-xs-6</div>
+        <div class="col-xs-6">.col-xs-6</div>
+        <div class="col-xs-6">.col-xs-6</div>
       </div>
 
       <hr>
@@ -125,13 +125,13 @@
       <h3>Mixed: mobile, tablet, and desktop</h3>
       <p></p>
       <div class="row">
-        <div class="col col-xs-12 col-sm-6 col-lg-8">.col .col-xs-12 .col-sm-6 .col-lg-8</div>
-        <div class="col col-xs-6 col-lg-4">.col .col-xs-6 .col-lg-4</div>
+        <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
+        <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
       </div>
       <div class="row">
-        <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
-        <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
-        <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
+        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
       </div>
 
       <hr>
@@ -139,18 +139,18 @@
       <h3>Column clearing</h3>
       <p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
       <div class="row">
-        <div class="col col-xs-6 col-sm-3">
+        <div class="col-xs-6 col-sm-3">
           .col-xs-6 .col-sm-3
           <br>
           Resize your viewport or check it out on your phone for an example.
         </div>
-        <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
+        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
         <!-- Add the extra clearfix for only the required viewport -->
         <div class="clearfix hidden-sm-up"></div>
 
-        <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
-        <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
+        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
       </div>
 
       <hr>
@@ -158,12 +158,12 @@
       <h3>Offset, push, and pull resets</h3>
       <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
       <div class="row">
-        <div class="col col-sm-5 col-md-6">.col .col-sm-5 .col-md-6</div>
-        <div class="col col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</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 col-sm-6 col-md-5 col-lg-6">.col .col-sm-6 .col-md-5 .col-lg-6</div>
-        <div class="col col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col .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 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</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>
 
 

diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html
index 1eb5c328648f25b772938fb5ef60570de4635289..3e362fb46a7ae781d8f6a7b60325859ba02226e3 100644 (file)
--- a/docs/examples/jumbotron/index.html
+++ b/docs/examples/jumbotron/index.html
@@ -47,17 +47,17 @@
     <div class="container">
       <!-- Example row of columns -->
       <div class="row">
-        <div class="col col-md-4">
+        <div class="col-md-4">
           <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
         </div>
-        <div class="col col-md-4">
+        <div class="col-md-4">
           <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
-        <div class="col col-md-4">
+        <div class="col-md-4">
           <h2>Heading</h2>
           <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
           <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index 08e4808e7c37703c3b2009ad56f82c29d7913717..a757a5c9a82b2a6e18c07c302b96dd0ab479002f 100644 (file)
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -47,18 +47,18 @@
 
       <!-- Example row of columns -->
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h2>Safari bug warning!</h2>
           <p class="text-danger">As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
           <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h2>Heading</h2>
           <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
           <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>

diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html
index 4d7c821ef72c779febd5a542af8b121503b9d4ca..fc55d06488a0a8d10e15c1addb38e5fd8a72bffe 100644 (file)
--- a/docs/examples/narrow-jumbotron/index.html
+++ b/docs/examples/narrow-jumbotron/index.html
@@ -45,7 +45,7 @@
       </div>
 
       <div class="row marketing">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Subheading</h4>
           <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 
@@ -56,7 +56,7 @@
           <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
         </div>
 
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Subheading</h4>
           <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 

diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index 262df60aaedc2636fe751f56e3b32b54ee17acf0..16a70b37992ec00d7351247b0c1e223d894a6c98 100644 (file)
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -34,7 +34,7 @@
 
       <div class="row row-offcanvas row-offcanvas-right">
 
-        <div class="col col-xs-12 col-sm-9">
+        <div class="col-xs-12 col-sm-9">
           <p class="pull-xs-right hidden-sm-up">
             <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
           </p>
@@ -43,32 +43,32 @@
             <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
           </div>
           <div class="row">
-            <div class="col col-xs-6 col-lg-4">
+            <div class="col-xs-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col col-xs-6 col-lg-4">
+            <div class="col-xs-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col col-xs-6 col-lg-4">
+            <div class="col-xs-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col col-xs-6 col-lg-4">
+            <div class="col-xs-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col col-xs-6 col-lg-4">
+            <div class="col-xs-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
             </div><!--/span-->
-            <div class="col col-xs-6 col-lg-4">
+            <div class="col-xs-6 col-lg-4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
               <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
@@ -76,7 +76,7 @@
           </div><!--/row-->
         </div><!--/span-->
 
-        <div class="col col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
+        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
           <div class="list-group">
             <a href="#" class="list-group-item active">Link</a>
             <a href="#" class="list-group-item">Link</a>

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 2c78101d65bcd2d006915ccd2af118e90ba38e66..6faa2e78ec5f4b8336f5efe4dea34d86dbeb31e5 100644 (file)
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -30,19 +30,29 @@ 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 and you're good to go.
+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">
+    <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">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
   </div>
@@ -56,13 +66,13 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col col-md-6">
+    <div class="col-xs-6">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
   </div>
@@ -78,35 +88,35 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row flex-items-xs-top">
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
   </div>
   <div class="row flex-items-xs-middle">
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
   </div>
   <div class="row flex-items-xs-bottom">
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
-    <div class="col">
+    <div class="col-xs">
       One of three columns
     </div>
   </div>
@@ -118,13 +128,13 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col flex-xs-top">
+    <div class="col-xs flex-xs-top">
       One of three columns
     </div>
-    <div class="col flex-xs-middle">
+    <div class="col-xs flex-xs-middle">
       One of three columns
     </div>
-    <div class="col flex-xs-bottom">
+    <div class="col-xs flex-xs-bottom">
       One of three columns
     </div>
   </div>
@@ -140,42 +150,42 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
 {% example html %}
 <div class="container">
   <div class="row flex-items-xs-left">
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-center">
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-right">
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-around">
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
   </div>
   <div class="row flex-items-xs-between">
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
-    <div class="col col-xs-4">
+    <div class="col-xs-4">
       One of two columns
     </div>
   </div>

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 5472846351c5f2f39f3c49a4966e468b86c641e6..75ee5d9c31eeca7898ceb6c0e0528fb85d9fe14d 100644 (file)
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -35,13 +35,13 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col col-sm-4">
+    <div class="col-sm-4">
       One of three columns
     </div>
-    <div class="col col-sm-4">
+    <div class="col-sm-4">
       One of three columns
     </div>
-    <div class="col col-sm-4">
+    <div class="col-sm-4">
       One of three columns
     </div>
   </div>
@@ -268,31 +268,31 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
-  <div class="col col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
+  <div class="col-md-1">md-1</div>
 </div>
 <div class="row">
-  <div class="col col-md-8">md-8</div>
-  <div class="col col-md-4">md-4</div>
+  <div class="col-md-8">md-8</div>
+  <div class="col-md-4">md-4</div>
 </div>
 <div class="row">
-  <div class="col col-md-4">md-4</div>
-  <div class="col col-md-4">md-4</div>
-  <div class="col col-md-4">md-4</div>
+  <div class="col-md-4">md-4</div>
+  <div class="col-md-4">md-4</div>
+  <div class="col-md-4">md-4</div>
 </div>
 <div class="row">
-  <div class="col col-md-6">md-6</div>
-  <div class="col col-md-6">md-6</div>
+  <div class="col-md-6">md-6</div>
+  <div class="col-md-6">md-6</div>
 </div>
 {% endexample %}
 </div>
@@ -305,21 +305,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small
 {% example html %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 <div class="row">
-  <div class="col col-xs-12 col-md-8">.col .col-xs-12 .col-md-8</div>
-  <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
+  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
 <div class="row">
-  <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
-  <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
-  <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 
 <!-- Columns are always 50% wide, on mobile and desktop -->
 <div class="row">
-  <div class="col col-xs-6">.col .col-xs-6</div>
-  <div class="col col-xs-6">.col .col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
 </div>
 {% endexample %}
 </div>
@@ -331,15 +331,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
-  <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
+  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 <div class="row">
-  <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
-  <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
+  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   <!-- Optional: clear the XS cols if their content doesn't match in height -->
   <div class="clearfix hidden-sm-up"></div>
-  <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
+  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 </div>
 {% endexample %}
 </div>
@@ -351,9 +351,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-xs-9">.col .col-xs-9</div>
-  <div class="col col-xs-4">.col .col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
-  <div class="col col-xs-6">.col .col-xs-6<br>Subsequent columns continue along the new line.</div>
+  <div class="col-xs-9">.col-xs-9</div>
+  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
 </div>
 {% endexample %}
 </div>
@@ -365,14 +365,14 @@ With the four tiers of grids available you're bound to run into issues where, at
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
-  <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
   <!-- Add the extra clearfix for only the required viewport -->
   <div class="clearfix hidden-sm-up"></div>
 
-  <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
-  <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 </div>
 {% endexample %}
 </div>
@@ -382,13 +382,13 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-sm-5 col-md-6">.col .col-sm-5 .col-md-6</div>
-  <div class="col col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
+  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
+  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
 </div>
 
 <div class="row">
-  <div class="col col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
-  <div class="col col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
+  <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
+  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
 </div>
 {% endexample %}
 </div>
@@ -400,15 +400,15 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-md-4">.col-md-4</div>
-  <div class="col col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
 </div>
 <div class="row">
-  <div class="col col-md-3 offset-md-3">.col .col-md-3 .offset-md-3</div>
-  <div class="col col-md-3 offset-md-3">.col .col-md-3 .offset-md-3</div>
+  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
 </div>
 <div class="row">
-  <div class="col col-md-6 offset-md-3">.col .col-md-6 .offset-md-3</div>
+  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
 </div>
 {% endexample %}
 </div>
@@ -420,14 +420,14 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-sm-9">
-    Level 1: .col .col-sm-9
+  <div class="col-sm-9">
+    Level 1: .col-sm-9
     <div class="row">
-      <div class="col col-xs-8 col-sm-6">
-        Level 2: .col .col-xs-8 .col-sm-6
+      <div class="col-xs-8 col-sm-6">
+        Level 2: .col-xs-8 .col-sm-6
       </div>
-      <div class="col col-xs-4 col-sm-6">
-        Level 2: .col .col-xs-4 .col-sm-6
+      <div class="col-xs-4 col-sm-6">
+        Level 2: .col-xs-4 .col-sm-6
       </div>
     </div>
   </div>
@@ -442,8 +442,8 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
 <div class="bd-example-row">
 {% example html %}
 <div class="row">
-  <div class="col col-md-9 push-md-3">.col .col-md-9 .push-md-3</div>
-  <div class="col col-md-3 pull-md-9">.col .col-md-3 .pull-md-9</div>
+  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
+  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
 </div>
 {% endexample %}
 </div>

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 78a0d91a92c32661a5e522fe5ff2dc75b5088535..6da25b122426f1a6410adfde8951aaaa72ab9091 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -36,16 +36,16 @@
 // Common styles for small and large grid columns
 
 @if $enable-grid-classes {
-  .col {
+  [class^="col"] {
     position: relative;
     min-height: 1px;
     padding-right: ($grid-gutter-width / 2);
     padding-left: ($grid-gutter-width / 2);
-
-    // Allow `.col` to use an automatic, even width when flex mode is enabled
-    @if $enable-flex {
-      flex: 1;
-    }
+    // 
+    // // Allow `.col` to use an automatic, even width when flex mode is enabled
+    // @if $enable-flex {
+    //   flex: 1;
+    // }
   }
 
   @include make-grid-columns();

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 442bd4a0a29dec6db898d37cb09217ae03987801..51eda056166586efa70e46f0efd36773a04d12e8 100644 (file)
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -9,14 +9,22 @@
     $breakpoint-counter: ($breakpoint-counter + 1);
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
-      %grid-column-float-#{$breakpoint} {
-        float: left;
+      // %grid-column-float-#{$breakpoint} {
+      //   float: left;
+      // }
+      @if $enable-flex {
+        .col-#{$breakpoint} {
+          @include make-col($gutter);
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+        }
       }
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
-          @if not $enable-flex {
-            @extend %grid-column-float-#{$breakpoint};
-          }
+          // @if not $enable-flex {
+          //   @extend %grid-column-float-#{$breakpoint};
+          // }
           @include make-col-span($i, $columns);
         }
       }

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 96e334af4fb6c95f53bf0edef3ada856c50d8763..f358ac3888ed6dd2198ebbe7ca7595304abde031 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -35,17 +35,25 @@
 
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  @if $enable-flex {
-    flex: 1;
-  } @else {
-    float: left;
-  }
+  // @if $enable-flex {
+  //   flex: 1;
+  // } @else {
+  //   float: left;
+  // }
   min-height: 1px;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 }
 
 @mixin make-col-span($size, $columns: $grid-columns) {
+  position: relative;
+  @if $enable-flex {
+    flex: 0 0 auto;
+  }
+  min-height: 1px;
+  padding-left:  ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width / 2);
+
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
@@ -53,6 +61,7 @@
     // do not appear to require this.
     max-width: percentage($size / $columns);
   } @else {
+    float: left;
     width: percentage($size / $columns);
   }
 }