From: Mark Otto <markdotto@gmail.com>
Date: Wed, 6 Sep 2017 04:08:17 +0000 (-0700)
Subject: link to css tricks article, add code snippet to example
X-Git-Tag: v4.0.0-beta.2~181
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=92a9b68372d05f22b4a9ed2eee94e28f3b4e341c;p=thirdparty%2Fbootstrap.git

link to css tricks article, add code snippet to example
---

diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index b61ecd3df4..cffc2e3287 100644
--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -10,7 +10,10 @@ toc: true
 
 Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
 
-<div class="bd-example bd-example-row">
+**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
+
+<div class="bd-example-row">
+{% example html %}
 <div class="container">
   <div class="row">
     <div class="col-sm">
@@ -24,6 +27,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
     </div>
   </div>
 </div>
+{% endexample %}
 </div>
 
 The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.