From 29dcf9ac623c5ae13bd3d582b9e0b369ba7a3cc6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:23:52 -0800 Subject: Update grid mixins code snippets in the docs to include flexbox changes --- docs/layout/grid.md | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index c318f5330..f2427137f 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -164,23 +164,40 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS {% highlight scss %} // Creates a wrapper for a series of columns @mixin make-row($gutter: $grid-gutter-width) { + @if $enable-flex { + display: flex; + flex-wrap: wrap; + } @else { + @include clearfix(); + } margin-left: ($gutter / -2); margin-right: ($gutter / -2); - @include clearfix(); } // Make the element grid-ready (applying everything but the width) @mixin make-col($gutter: $grid-gutter-width) { position: relative; - float: left; + @if $enable-flex { + flex: 1; + } @else { + float: left; + } min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); } -// Set a width (to be used in or out of media queries) -@mixin make-col-span($columns) { - width: percentage(($columns / $grid-columns)); +@mixin make-col-span($size, $columns: $grid-columns) { + // Set a width (to be used in or out of media queries) + @if $enable-flex { + flex: 0 0 percentage($size / $columns); + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($size / $columns); + } @else { + width: percentage($size / $columns); + } } // Get fancy by offsetting, or changing the sort order -- cgit v1.2.3 From a9e428a7287bd4c7e33e286979830137fc914587 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:46:00 -0800 Subject: Update grid docs to include new required .col base class --- docs/layout/grid.md | 120 ++++++++++++++++++++++++++-------------------------- 1 file changed, 60 insertions(+), 60 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index c318f5330..029fcdfe2 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -35,13 +35,13 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -246,36 +246,36 @@ In addition to our semantic mixins, Bootstrap includes an extensive set of prebu ### Example: Stacked-to-horizontal -Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`. +Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns with the `.col` base class and a modifier within any `.row`.
{% example html %}
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
-
.col-md-8
-
.col-md-4
+
md-8
+
md-4
-
.col-md-4
-
.col-md-4
-
.col-md-4
+
md-4
+
md-4
+
md-4
-
.col-md-6
-
.col-md-6
+
md-6
+
md-6
{% endexample %}
@@ -288,21 +288,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small {% example html %}
-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
+
.col .col-xs-12 .col-md-8
+
.col .col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
+
.col .col-xs-6 .col-md-4
+
.col .col-xs-6 .col-md-4
+
.col .col-xs-6 .col-md-4
-
.col-xs-6
-
.col-xs-6
+
.col .col-xs-6
+
.col .col-xs-6
{% endexample %}
@@ -314,15 +314,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
{% example html %}
-
.col-xs-12 .col-sm-6 .col-md-8
-
.col-xs-6 .col-md-4
+
.col-xs-12 .col-sm-6 .col-md-8
+
.col .col-xs-6 .col-md-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col .col-xs-6 .col-sm-4
+
.col .col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col .col-xs-6 .col-sm-4
{% endexample %}
@@ -334,9 +334,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
{% example html %}
-
.col-xs-9
-
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
-
.col-xs-6
Subsequent columns continue along the new line.
+
.col .col-xs-9
+
.col .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+
.col .col-xs-6
Subsequent columns continue along the new line.
{% endexample %}
@@ -348,14 +348,14 @@ With the four tiers of grids available you're bound to run into issues where, at
{% example html %}
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
{% endexample %}
@@ -365,33 +365,33 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
{% example html %}
-
.col-sm-5 .col-md-6
-
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
+
.col .col-sm-5 .col-md-6
+
.col .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-
.col-sm-6 .col-md-5 .col-lg-6
-
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
+
.col.col-sm-6.col-md-5.col-lg-6
+
.col .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
{% endexample %}
### Example: Offsetting columns -Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns. +Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
{% example html %}
-
.col-md-4
-
.col-md-4 .col-md-offset-4
+
.col-md-4
+
.col-md-4 .offset-md-4
-
.col-md-3 .col-md-offset-3
-
.col-md-3 .col-md-offset-3
+
.col .col-md-3 .offset-md-3
+
.col .col-md-3 .offset-md-3
-
.col-md-6 .col-md-offset-3
+
.col .col-md-6 .offset-md-3
{% endexample %}
@@ -403,14 +403,14 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
{% example html %}
-
- Level 1: .col-sm-9 +
+ Level 1: .col .col-sm-9
-
- Level 2: .col-xs-8 .col-sm-6 +
+ Level 2: .col .col-xs-8 .col-sm-6
-
- Level 2: .col-xs-4 .col-sm-6 +
+ Level 2: .col .col-xs-4 .col-sm-6
@@ -425,8 +425,8 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
{% example html %}
-
.col-md-9 .col-md-push-3
-
.col-md-3 .col-md-pull-9
+
.col .col-md-9 .push-md-3
+
.col .col-md-3 .pull-md-9
{% endexample %}
-- cgit v1.2.3 From 511b959ff9264f319e75e6d9a6d75f15b2c4d6dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:46:50 -0800 Subject: Add flexbox grid page to the docs (still more content to add) --- docs/layout/flexbox-grid.md | 71 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 docs/layout/flexbox-grid.md (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md new file mode 100644 index 000000000..4ccd37f48 --- /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. + +
+{% example html %} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{% endexample %} +
+ +Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. + +
+{% example html %} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{% endexample %} +
-- cgit v1.2.3 From 9a519bb7e33c65456aaaf401b6f90975309d416d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 01:30:11 -0800 Subject: Add vertical alignment docs for flexbox grid --- docs/layout/flexbox-grid.md | 62 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 4ccd37f48..00097c3cd 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -69,3 +69,65 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
{% endexample %}
+ +## Vertical alignment + +Use the flexbox alignment utilities to vertically align columns. + +
+{% example html %} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{% endexample %} +
+ +
+{% example html %} +
+
+
+ One of three columns +
+
+ One of three columns +
+
+ One of three columns +
+
+
+{% endexample %} +
-- cgit v1.2.3 From 2a678d4b8813870e9cdc14d666b9a3bcf36fe1f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 01:47:25 -0800 Subject: document horizontal flex utils, update the classes for the middle vertical ones --- docs/layout/flexbox-grid.md | 55 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 00097c3cd..2c78101d6 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -88,7 +88,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns
-
+
One of three columns
@@ -121,7 +121,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns
-
+
One of three columns
@@ -131,3 +131,54 @@ Use the flexbox alignment utilities to vertically align columns.
{% endexample %}
+ +## Horizontal alignment + +Flexbox utilities for horizontal alignment also exist for a number of layout options. + +
+{% example html %} +
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+ One of two columns +
+
+ One of two columns +
+
+
+{% endexample %} +
-- cgit v1.2.3 From 414997baa83858b43e9f45af90097f93ed2d6797 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 10:51:59 -0800 Subject: flip things around again, no more base class, try out some new stuff to keep responsive flex grid working --- docs/layout/flexbox-grid.md | 68 +++++++++++++++----------- docs/layout/grid.md | 116 ++++++++++++++++++++++---------------------- 2 files changed, 97 insertions(+), 87 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 2c78101d6..6faa2e78e 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -30,19 +30,29 @@ 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. +As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col-*`s for each breakpoint you need and you're good to go.
{% example html %}
-
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -56,13 +66,13 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -78,35 +88,35 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -118,13 +128,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -140,42 +150,42 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt {% example html %}
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 547284635..75ee5d9c3 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -35,13 +35,13 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -268,31 +268,31 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst
{% example html %}
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
-
md-8
-
md-4
+
md-8
+
md-4
-
md-4
-
md-4
-
md-4
+
md-4
+
md-4
+
md-4
-
md-6
-
md-6
+
md-6
+
md-6
{% endexample %}
@@ -305,21 +305,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small {% example html %}
-
.col .col-xs-12 .col-md-8
-
.col .col-xs-6 .col-md-4
+
.col-xs-12 .col-md-8
+
.col-xs-6 .col-md-4
-
.col .col-xs-6 .col-md-4
-
.col .col-xs-6 .col-md-4
-
.col .col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
.col .col-xs-6
-
.col .col-xs-6
+
.col-xs-6
+
.col-xs-6
{% endexample %}
@@ -331,15 +331,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
{% example html %}
-
.col-xs-12 .col-sm-6 .col-md-8
-
.col .col-xs-6 .col-md-4
+
.col-xs-12 .col-sm-6 .col-md-8
+
.col-xs-6 .col-md-4
-
.col .col-xs-6 .col-sm-4
-
.col .col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
-
.col .col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
{% endexample %}
@@ -351,9 +351,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
{% example html %}
-
.col .col-xs-9
-
.col .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
-
.col .col-xs-6
Subsequent columns continue along the new line.
+
.col-xs-9
+
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+
.col-xs-6
Subsequent columns continue along the new line.
{% endexample %}
@@ -365,14 +365,14 @@ With the four tiers of grids available you're bound to run into issues where, at
{% example html %}
-
.col .col-xs-6 .col-sm-3
-
.col .col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
-
.col .col-xs-6 .col-sm-3
-
.col .col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
{% endexample %}
@@ -382,13 +382,13 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
{% example html %}
-
.col .col-sm-5 .col-md-6
-
.col .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
+
.col-sm-5 .col-md-6
+
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-
.col.col-sm-6.col-md-5.col-lg-6
-
.col .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
+
.col.col-sm-6.col-md-5.col-lg-6
+
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
{% endexample %}
@@ -400,15 +400,15 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
{% example html %}
-
.col-md-4
-
.col-md-4 .offset-md-4
+
.col-md-4
+
.col-md-4 .offset-md-4
-
.col .col-md-3 .offset-md-3
-
.col .col-md-3 .offset-md-3
+
.col-md-3 .offset-md-3
+
.col-md-3 .offset-md-3
-
.col .col-md-6 .offset-md-3
+
.col-md-6 .offset-md-3
{% endexample %}
@@ -420,14 +420,14 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
{% example html %}
-
- Level 1: .col .col-sm-9 +
+ Level 1: .col-sm-9
-
- Level 2: .col .col-xs-8 .col-sm-6 +
+ Level 2: .col-xs-8 .col-sm-6
-
- Level 2: .col .col-xs-4 .col-sm-6 +
+ Level 2: .col-xs-4 .col-sm-6
@@ -442,8 +442,8 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
{% example html %}
-
.col .col-md-9 .push-md-3
-
.col .col-md-3 .pull-md-9
+
.col-md-9 .push-md-3
+
.col-md-3 .pull-md-9
{% endexample %}
-- cgit v1.2.3 From 95f34be0936f6309fde4d3ecb408cdffb4b0c2db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 11:31:46 -0800 Subject: More grid updates - Flexbox responsive behavior fixed with specific .col-{breakpoint} classes now added - Dropped the make-col mixin in favor of a column-basics placeholder that we can extend across our grid infrastructure - Updated docs to use required .col-xs-12 (as a safeguard for when folks enable flexbox mode--this isn't necessary in default grid mode) - Update flexbox grid docs to include responsive docs, tweak some other bits too --- docs/layout/flexbox-grid.md | 42 ++++++++++++++++++++++++++++++------------ 1 file changed, 30 insertions(+), 12 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 6faa2e78e..6d372a96c 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -23,37 +23,36 @@ The flexbox grid system behaves similar to our default grid system, but with a f - [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 without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. +- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. 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 for each breakpoint you need and you're good to go. +When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and you're good to go. For example, here's are two grid layouts that apply to every device and viewport possible.
{% example html %}
- One of two columns + 1 of 2
- One of two columns + 1 of 2
-
-
- One of three columns + 1 of 3
- One of three columns + 1 of 3
- One of three columns + 1 of 3
@@ -67,13 +66,32 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
- One of three columns + 1 of 3
- One of three columns + 2 of 3 (wider)
- One of three columns + 3 of 3 +
+
+
+{% endexample %} +
+ +## Responsive flexbox + +Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. + +
+{% example html %} +
+
+
+ 1 of 2 (stacked on mobile) +
+
+ 1 of 2 (stacked on mobile)
-- cgit v1.2.3 From 7114e94d6668ad2b7b91b67d2b3d75a9258b1c2a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 13:02:10 -0800 Subject: formatting --- docs/layout/grid.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 75ee5d9c3..b0e00a396 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -52,8 +52,7 @@ The above example creates three equal-width columns on small, medium, large, and ## Grid options -While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. -This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units). +While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units). See how aspects of the Bootstrap grid system work across multiple devices with a handy table. -- cgit v1.2.3 From bc45addbc37e70e195c28cc6857360202d5e565e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 13:02:28 -0800 Subject: update grid vars docs --- docs/layout/grid.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index b0e00a396..d43f6e8ab 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -135,9 +135,12 @@ When using Bootstrap's source Sass files, you have the option of using Sass vari ### Variables -Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below. +Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below. {% highlight scss %} +$grid-columns: 12; +$grid-gutter-width: 15px; + $grid-breakpoints: ( // Extra small screen / phone xs: 0, @@ -151,9 +154,12 @@ $grid-breakpoints: ( xl: 1200px ); - -$grid-columns: 12; -$grid-gutter-width: 1.875rem; +$container-max-widths: ( + sm: 576px, + md: 720px, + lg: 940px, + xl: 1140px +) !default; {% endhighlight %} ### Mixins -- cgit v1.2.3 From fb4f5f0bf1e22f707bdd16880fe19328df091bde Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 13:02:42 -0800 Subject: document how to customize grid tiers --- docs/layout/grid.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index d43f6e8ab..3a76a651b 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -452,3 +452,25 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
{% endexample %}
+ +## Customizing the grid + +Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. + +For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: + +{% highlight scss %} +$grid-breakpoints: ( + sm: 480px, + md: 768px, + lg: 1024px +); + +$container-max-widths: ( + sm: 420px, + md: 720px, + lg: 940px +) !default; +{% endhighlight %} + +Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. -- cgit v1.2.3