diff options
| author | Mark Otto <[email protected]> | 2017-09-05 21:08:17 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-09-30 20:30:40 -0700 |
| commit | 92a9b68372d05f22b4a9ed2eee94e28f3b4e341c (patch) | |
| tree | ab5b0f6a2d36abe5a26d50979eb53482c8b04b13 | |
| parent | c449f3323ad80be54a7bc59e2e33d5b1a73b18ce (diff) | |
| download | bootstrap-92a9b68372d05f22b4a9ed2eee94e28f3b4e341c.tar.xz bootstrap-92a9b68372d05f22b4a9ed2eee94e28f3b4e341c.zip | |
link to css tricks article, add code snippet to example
| -rw-r--r-- | docs/4.0/layout/grid.md | 6 |
1 files changed, 5 insertions, 1 deletions
diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index b61ecd3df..cffc2e328 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`. |