diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index fb2713b9f2..1fc97157e2 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -15,6 +15,7 @@ pages: - title: Overview - title: Grid + - title: Flexbox grid - title: Media object - title: Responsive utilities diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md new file mode 100644 index 0000000000..4ccd37f486 --- /dev/null +++ b/docs/layout/flexbox-grid.md @@ -0,0 +1,71 @@ +--- +layout: docs +title: Flexbox grid system +group: layout +--- + +Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content. + +Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it. + +{% callout warning %} +**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled. +{% endcallout %} + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## How it works + +The flexbox grid system behaves similar to our default grid system, but with a few notable differences: + +- [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise. +- Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system. +- Flexbox grid columns without a set width will automatically layout with even widths. For example, four columns will each automatically be 25% wide. +- Flexbox grid columns have significantly more alignment options available, including vertical alignment. + +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. + +