From 5a9538d4c789ab25be71db1e6f190b8ad80e6858 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:45:29 -0800 Subject: [PATCH 01/30] Revamp grid classes to require .col base class and improve flexbox grid classes with auto layout via flex: 1 --- scss/_grid.scss | 12 ++++++++++++ scss/mixins/_grid-framework.scss | 18 ++---------------- scss/mixins/_grid.scss | 4 +++- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index d846f098c4..de5b8fc4d7 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -36,6 +36,18 @@ // Common styles for small and large grid columns @if $enable-grid-classes { + .col { + position: relative; + min-height: 1px; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); + + // Allow `.col` to use an automatic, even width when flex mode is enabled + @if $enable-flex { + flex: 1; + } + } + @include make-grid-columns(); } diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 16c970a81c..442bd4a0a2 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -4,23 +4,9 @@ // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { - // Common properties for all breakpoints - %grid-column { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - } $breakpoint-counter: 0; @each $breakpoint in map-keys($breakpoints) { $breakpoint-counter: ($breakpoint-counter + 1); - @for $i from 1 through $columns { - .col-#{$breakpoint}-#{$i} { - @extend %grid-column; - } - } @include media-breakpoint-up($breakpoint, $breakpoints) { // Work around cross-media @extend (https://github.com/sass/sass/issues/1050) %grid-column-float-#{$breakpoint} { @@ -36,7 +22,7 @@ } @each $modifier in (pull, push) { @for $i from 0 through $columns { - .col-#{$breakpoint}-#{$modifier}-#{$i} { + .#{$modifier}-#{$breakpoint}-#{$i} { @include make-col-modifier($modifier, $i, $columns) } } @@ -44,7 +30,7 @@ // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0 - .col-#{$breakpoint}-offset-#{$i} { + .offset-#{$breakpoint}-#{$i} { @include make-col-modifier(offset, $i, $columns) } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 230dacc547..96e334af4f 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -35,7 +35,9 @@ @mixin make-col($gutter: $grid-gutter-width) { position: relative; - @if not $enable-flex { + @if $enable-flex { + flex: 1; + } @else { float: left; } min-height: 1px; From a9e428a7287bd4c7e33e286979830137fc914587 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:46:00 -0800 Subject: [PATCH 02/30] Update grid docs to include new required .col base class --- docs/layout/grid.md | 120 ++++++++++++++++++++++---------------------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/docs/layout/grid.md b/docs/layout/grid.md index c318f5330a..029fcdfe23 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 %}
From 3f30818a4b516d9ca02a6cbbe344722e2fb2ba6f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:46:23 -0800 Subject: [PATCH 03/30] Fix docs layout with added base class --- docs/_layouts/docs.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html index fc47e6f405..92d95dca70 100644 --- a/docs/_layouts/docs.html +++ b/docs/_layouts/docs.html @@ -21,10 +21,10 @@
-
+
{% include nav-docs.html %}
-
+

{{ page.title }}

{{ content }}
From 511b959ff9264f319e75e6d9a6d75f15b2c4d6dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:46:50 -0800 Subject: [PATCH 04/30] Add flexbox grid page to the docs (still more content to add) --- docs/_data/nav.yml | 1 + docs/layout/flexbox-grid.md | 71 +++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 docs/layout/flexbox-grid.md 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. + +
+{% 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 %} +
From 9a645ef51af94289e784fda5cf200e78aa41779d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:47:19 -0800 Subject: [PATCH 05/30] Ensure docs grid example highlighting for flexbox mode --- docs/assets/scss/_component-examples.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index c3feb60730..398847bfdd 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -6,6 +6,7 @@ .row { margin-bottom: 1rem; + > .col, > [class^="col-"] { padding-top: .75rem; padding-bottom: .75rem; From e149a6035ef5689040d619ac7301f802b1dc8167 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:47:33 -0800 Subject: [PATCH 06/30] Update base class for grid cols in all examples --- docs/examples/blog/index.html | 4 +- docs/examples/carousel/index.html | 18 ++--- docs/examples/dashboard/index.html | 12 +-- docs/examples/grid/index.html | 94 +++++++++++------------ docs/examples/jumbotron/index.html | 6 +- docs/examples/justified-nav/index.html | 6 +- docs/examples/narrow-jumbotron/index.html | 4 +- docs/examples/offcanvas/index.html | 16 ++-- 8 files changed, 80 insertions(+), 80 deletions(-) diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html index a9f9b78ede..014e0a6c10 100644 --- a/docs/examples/blog/index.html +++ b/docs/examples/blog/index.html @@ -43,7 +43,7 @@
-
+

Sample blog post

@@ -111,7 +111,7 @@
-
+

About

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 5e01f8df04..55ecc1953b 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -98,19 +98,19 @@
-
+
Generic placeholder image

Heading

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.

View details »

-
+
Generic placeholder image

Heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

View details »

-
+
Generic placeholder image

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

@@ -124,11 +124,11 @@
-
+

First featurette heading. It'll blow your mind.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
+
Generic placeholder image
@@ -136,11 +136,11 @@
-
+

Oh yeah, it's that good. See for yourself.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
+
Generic placeholder image
@@ -148,11 +148,11 @@
-
+

And lastly, this one. Checkmate.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
+
Generic placeholder image
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index a86e3ecb9f..a956bd4113 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -43,7 +43,7 @@
-
+
-
+

Dashboard

-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html index 74b5852f5b..c9bcf8b93f 100644 --- a/docs/examples/grid/index.html +++ b/docs/examples/grid/index.html @@ -30,56 +30,56 @@

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

-
.col-xs-4
-
.col-xs-4
-
.col-xs-4
+
.col .col-xs-4
+
.col .col-xs-4
+
.col .col-xs-4
-
.col-sm-4
-
.col-sm-4
-
.col-sm-4
+
.col .col-sm-4
+
.col .col-sm-4
+
.col .col-sm-4
-
.col-md-4
-
.col-md-4
-
.col-md-4
+
.col .col-md-4
+
.col .col-md-4
+
.col .col-md-4
-
.col-lg-4
-
.col-lg-4
-
.col-lg-4
+
.col .col-lg-4
+
.col .col-lg-4
+
.col .col-lg-4
-
.col-xl-4
-
.col-xl-4
-
.col-xl-4
+
.col .col-xl-4
+
.col .col-xl-4
+
.col .col-xl-4

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

-
.col-md-4
-
.col-md-4
-
.col-md-4
+
.col .col-md-4
+
.col .col-md-4
+
.col .col-md-4

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

-
.col-md-3
-
.col-md-6
-
.col-md-3
+
.col .col-md-3
+
.col .col-md-6
+
.col .col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

-
.col-md-8
-
.col-md-4
+
.col .col-md-8
+
.col .col-md-4

Full width, single column

@@ -91,14 +91,14 @@

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

-
+
.col-md-8
-
.col-md-6
-
.col-md-6
+
.col .col-md-6
+
.col .col-md-6
-
.col-md-4
+
.col .col-md-4
@@ -107,17 +107,17 @@

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

-
.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
@@ -125,13 +125,13 @@

Mixed: mobile, tablet, and desktop

-
.col-xs-12 .col-sm-6 .col-lg-8
-
.col-xs-6 .col-lg-4
+
.col .col-xs-12 .col-sm-6 .col-lg-8
+
.col .col-xs-6 .col-lg-4
-
.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 .col-xs-6 .col-sm-4
+
.col .col-xs-6 .col-sm-4
@@ -139,18 +139,18 @@

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

-
+
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
-
.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
@@ -158,12 +158,12 @@

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

-
.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 .col-sm-offset-2 .col-md-6 .col-md-offset-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 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html index 3e362fb46a..1eb5c32864 100644 --- a/docs/examples/jumbotron/index.html +++ b/docs/examples/jumbotron/index.html @@ -47,17 +47,17 @@
-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html index a757a5c9a8..08e4808e7c 100644 --- a/docs/examples/justified-nav/index.html +++ b/docs/examples/justified-nav/index.html @@ -47,18 +47,18 @@
-
+

Safari bug warning!

As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

View details »

diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html index fc55d06488..4d7c821ef7 100644 --- a/docs/examples/narrow-jumbotron/index.html +++ b/docs/examples/narrow-jumbotron/index.html @@ -45,7 +45,7 @@
-
+

Subheading

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

@@ -56,7 +56,7 @@

Maecenas sed diam eget risus varius blandit sit amet non magna.

-
+

Subheading

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index 16a70b3799..262df60aae 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -34,7 +34,7 @@
-
+

@@ -43,32 +43,32 @@

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

@@ -76,7 +76,7 @@
-
-
+
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 %} +
From 94999c98cf3a19a2aa020fb946027747e7ef3d26 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 01:47:40 -0800 Subject: [PATCH 17/30] simpler, more specific docs example css --- docs/assets/scss/_component-examples.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index 093d29b649..79067275c1 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -15,7 +15,9 @@ } } - [class*="flex-items-"] { + .flex-items-xs-top, + .flex-items-xs-middle, + .flex-items-xs-bottom { min-height: 6rem; background-color: rgba(255,0,0,.1); } From 414997baa83858b43e9f45af90097f93ed2d6797 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 10:51:59 -0800 Subject: [PATCH 18/30] flip things around again, no more base class, try out some new stuff to keep responsive flex grid working --- docs/_layouts/docs.html | 4 +- docs/assets/scss/_component-examples.scss | 6 +- docs/examples/blog/index.html | 4 +- docs/examples/carousel/index.html | 18 ++-- docs/examples/dashboard/index.html | 12 +-- docs/examples/grid/index.html | 94 +++++++++--------- docs/examples/jumbotron/index.html | 6 +- docs/examples/justified-nav/index.html | 6 +- docs/examples/narrow-jumbotron/index.html | 4 +- docs/examples/offcanvas/index.html | 16 +-- docs/layout/flexbox-grid.md | 68 +++++++------ docs/layout/grid.md | 116 +++++++++++----------- scss/_grid.scss | 12 +-- scss/mixins/_grid-framework.scss | 18 +++- scss/mixins/_grid.scss | 19 +++- 15 files changed, 216 insertions(+), 187 deletions(-) diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html index 92d95dca70..e57dfdd3cc 100644 --- a/docs/_layouts/docs.html +++ b/docs/_layouts/docs.html @@ -21,10 +21,10 @@
-
+
{% include nav-docs.html %}
-
+

{{ page.title }}

{{ content }}
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index 79067275c1..64ee929502 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -3,9 +3,11 @@ // .bd-example-row { - .row { - margin-bottom: 1rem; + .row + .row { + margin-top: 1rem; + } + .row { > .col, > [class^="col-"] { padding-top: .75rem; diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html index 014e0a6c10..d4e9dbcc55 100644 --- a/docs/examples/blog/index.html +++ b/docs/examples/blog/index.html @@ -43,7 +43,7 @@
-
+

Sample blog post

@@ -111,7 +111,7 @@
-
+

About

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 55ecc1953b..986c4e8a51 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -98,19 +98,19 @@
-
+
Generic placeholder image

Heading

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.

View details »

-
+
Generic placeholder image

Heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

View details »

-
+
Generic placeholder image

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

@@ -124,11 +124,11 @@
-
+

First featurette heading. It'll blow your mind.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
+
Generic placeholder image
@@ -136,11 +136,11 @@
-
+

Oh yeah, it's that good. See for yourself.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
+
Generic placeholder image
@@ -148,11 +148,11 @@
-
+

And lastly, this one. Checkmate.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

-
+
Generic placeholder image
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index a956bd4113..65cc380cbc 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -43,7 +43,7 @@
-
+
-
+

Dashboard

-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html index c9bcf8b93f..9e831115b4 100644 --- a/docs/examples/grid/index.html +++ b/docs/examples/grid/index.html @@ -30,56 +30,56 @@

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

-
.col .col-xs-4
-
.col .col-xs-4
-
.col .col-xs-4
+
.col-xs-4
+
.col-xs-4
+
.col-xs-4
-
.col .col-sm-4
-
.col .col-sm-4
-
.col .col-sm-4
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
-
.col .col-md-4
-
.col .col-md-4
-
.col .col-md-4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-
.col .col-lg-4
-
.col .col-lg-4
-
.col .col-lg-4
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
-
.col .col-xl-4
-
.col .col-xl-4
-
.col .col-xl-4
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

-
.col .col-md-4
-
.col .col-md-4
-
.col .col-md-4
+
.col-md-4
+
.col-md-4
+
.col-md-4

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

-
.col .col-md-3
-
.col .col-md-6
-
.col .col-md-3
+
.col-md-3
+
.col-md-6
+
.col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

-
.col .col-md-8
-
.col .col-md-4
+
.col-md-8
+
.col-md-4

Full width, single column

@@ -91,14 +91,14 @@

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

-
+
.col-md-8
-
.col .col-md-6
-
.col .col-md-6
+
.col-md-6
+
.col-md-6
-
.col .col-md-4
+
.col-md-4
@@ -107,17 +107,17 @@

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

-
.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
@@ -125,13 +125,13 @@

Mixed: mobile, tablet, and desktop

-
.col .col-xs-12 .col-sm-6 .col-lg-8
-
.col .col-xs-6 .col-lg-4
+
.col-xs-12 .col-sm-6 .col-lg-8
+
.col-xs-6 .col-lg-4
-
.col .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-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
@@ -139,18 +139,18 @@

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

-
+
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
-
.col .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
@@ -158,12 +158,12 @@

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

-
.col .col-sm-5 .col-md-6
-
.col .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
+
.col-sm-5 .col-md-6
+
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
-
.col .col-sm-6 .col-md-5 .col-lg-6
-
.col .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-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
diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html index 1eb5c32864..3e362fb46a 100644 --- a/docs/examples/jumbotron/index.html +++ b/docs/examples/jumbotron/index.html @@ -47,17 +47,17 @@
-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html index 08e4808e7c..a757a5c9a8 100644 --- a/docs/examples/justified-nav/index.html +++ b/docs/examples/justified-nav/index.html @@ -47,18 +47,18 @@
-
+

Safari bug warning!

As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

View details »

diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html index 4d7c821ef7..fc55d06488 100644 --- a/docs/examples/narrow-jumbotron/index.html +++ b/docs/examples/narrow-jumbotron/index.html @@ -45,7 +45,7 @@
-
+

Subheading

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

@@ -56,7 +56,7 @@

Maecenas sed diam eget risus varius blandit sit amet non magna.

-
+

Subheading

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index 262df60aae..16a70b3799 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -34,7 +34,7 @@
-
+

@@ -43,32 +43,32 @@

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

@@ -76,7 +76,7 @@
-