From 1f7f8bf06cdd56b5d7410b784930217a880bebaf Mon Sep 17 00:00:00 2001
From: Glen Cheney <cheney.glen@gmail.com>
Date: Tue, 20 Feb 2018 12:07:53 -0800
Subject: [PATCH] Bootstrap 4 alpha 6 => bootstrap 4

---
 docs/_posts/2017-06-12-flexbox-grid.html | 26 +++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/docs/_posts/2017-06-12-flexbox-grid.html b/docs/_posts/2017-06-12-flexbox-grid.html
index 15a04f4..9c89afa 100644
--- a/docs/_posts/2017-06-12-flexbox-grid.html
+++ b/docs/_posts/2017-06-12-flexbox-grid.html
@@ -3,7 +3,7 @@ layout: default
 title: Flexbox Grid Demo
 description: A demo of Shuffle with a flexbox grid from Bootstrap 4.
 image: /demos/flexbox-grid.jpg
-externalCSS: [ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" ]
+externalCSS: [ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ]
 extraJS: [ "demos/padding-grid.js" ]
 prism: true
 photoCredit: false
@@ -23,7 +23,7 @@ photoCredit: false
     <div class="col-12">
       <h2>Shuffle with Flexbox (Bootstrap 4)</h2>
       <p>On this page, I have added the minified bootstrap css file from the <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> (which is also why some of the site-styles are being overriden).</p>
-      <p>The <a href="https://v4-alpha.getbootstrap.com/layout/grid/">Bootstrap 4 grid</a> system uses flexbox with padding for gutters.</p>
+      <p>The <a href="https://getbootstrap.com/docs/4.0/layout/grid/">Bootstrap 4 grid</a> system uses flexbox with padding for gutters.</p>
       <p>The best way to handle this is to have the shuffle container element (<code>#grid</code> in this case), to be a <code>.row</code> so that all the shuffle items remain flex-items.</p>
       <p class="mb-0">If you cannot make the shuffle container element a <code>.row</code>, you will need to set a <code>width</code> for each column (like <code>width: 25%;</code>).</p>
     </div>
@@ -35,17 +35,15 @@ photoCredit: false
   <div id="grid" class="my-shuffle-container row">
     {% for i in (1..20) %}
       <div class="grid__brick mt-3 col-6 col-md-4 col-xl-3">
-        <div class="card {% cycle 'card-primary card-inverse', 'card-success card-inverse', 'card-info card-inverse', 'card-warning card-inverse', 'card-danger card-inverse', 'card-outline-primary', 'card-outline-success', 'card-outline-info', 'card-outline-warning', 'card-outline-danger' %}">
-          <div class="card-block">
-            {% cycle
-              'Return on investment product management equity crowdfunding stock pivot innovator sales ownership.',
-              'Founders ecosystem hackathon product management lean startup MVP.',
-              'Traction bandwidth MVP direct mailing partner network gen-z growth hacking crowdsource channels responsive web design pivot.',
-              'Conversion technology long tail influencer analytics rockstar market seed money.',
-              'Investor bandwidth equity ecosystem vesting period client social media.',
-              'Angel investor niche market client churn rate crowdsource infrastructure paradigm shift marketing prototype.'
-           %}
-          </div>
+        <div class="card {% cycle 'bg-primary text-white', 'bg-success text-white', 'bg-info text-white', 'bg-warning text-white', 'bg-danger text-white', 'border-primary', 'border-success', 'border-info', 'border-warning', 'border-danger' %}">
+          <div class="card-body">{% cycle
+            'Return on investment product management equity crowdfunding stock pivot innovator sales ownership.',
+            'Founders ecosystem hackathon product management lean startup MVP.',
+            'Traction bandwidth MVP direct mailing partner network gen-z growth hacking crowdsource channels responsive web design pivot.',
+            'Conversion technology long tail influencer analytics rockstar market seed money.',
+            'Investor bandwidth equity ecosystem vesting period client social media.',
+            'Angel investor niche market client churn rate crowdsource infrastructure paradigm shift marketing prototype.'
+           %}</div>
         </div>
       </div>
     {% endfor %}
@@ -57,7 +55,7 @@ photoCredit: false
   <div class="row">
     <div class="col-12">
       <p>The one change I've made to the grid is to allow grid columns to fit on mobile.</p>
-      <p>By default, bootstrap 4 grid gutters are 30px, even on mobile, and they use as 12 column grid. At 320px, each column would need to be 26.667px for 12 columsn to fit, but since there is 30px of inner gutter, the columns are always >= 30px, so they don't fit for us.</p>
+      <p>By default, bootstrap 4 grid gutters are 30px, even on mobile, and they use as 12 column grid. At 320px, each column would need to be 26.667px for 12 columns to fit, but since there is 30px of inner gutter, the columns are always >= 30px, so they don't fit for us.</p>
       <p>If you're using Bootstrap's sass files, you can customize the gutter width via the <code>$grid-gutter-widths</code> map. In this example, I'm overriding it instead.</p>
       <div class="code-block">
         <pre rel="CSS"><code class="language-css">@media (max-width: 575px) {