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
On this page, I have added the minified bootstrap css file from the Bootstrap CDN (which is also why some of the site-styles are being overriden).
-The Bootstrap 4 grid system uses flexbox with padding for gutters.
+The Bootstrap 4 grid system uses flexbox with padding for gutters.
The best way to handle this is to have the shuffle container element (#grid
in this case), to be a .row
so that all the shuffle items remain flex-items.
If you cannot make the shuffle container element a .row
, you will need to set a width
for each column (like width: 25%;
).
The one change I've made to the grid is to allow grid columns to fit on mobile.
-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.
+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.
If you're using Bootstrap's sass files, you can customize the gutter width via the $grid-gutter-widths
map. In this example, I'm overriding it instead.
@media (max-width: 575px) {