From 7071fe9c1ba90c2ab645b088a51eaf036a22edda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 Jun 2016 21:18:23 -0700 Subject: Fixes #17089 a bit --- docs/layout/responsive-utilities.md | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 839aeeb24..2a44fd589 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -188,6 +188,9 @@ Green checkmarks indicate the element **is visible** in your current viewport. Large or narrower + +
+
✔ Visible on small or wider @@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport. Extra large
+ +
+
-
+
✔ Your viewport is exactly extra small Your viewport is NOT exactly extra small
-
+
✔ Your viewport is exactly small Your viewport is NOT exactly small
-
+
✔ Your viewport is exactly medium Your viewport is NOT exactly medium
-
+
+ +
+
✔ Your viewport is exactly large Your viewport is NOT exactly large
-
+
✔ Your viewport is exactly extra large Your viewport is NOT exactly extra large
-- cgit v1.2.3 From c2189876eefed8233ce2bbd0fe4ac96e4f85aa58 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 12 Jul 2016 22:27:06 +0300 Subject: Remove trailing space. [ci skip] --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 44a12aee6..81cdecf60 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -144,7 +144,7 @@ These media queries are also available via Sass mixins: And finally media that spans multiple breakpoint widths: {% highlight scss %} -// Example +// Example // Medium devices (tablets, 768px and up) and Large devices (desktops, 992px and up) @media (min-width: 768px) and (max-width: 1199px) { ... } {% endhighlight %} -- cgit v1.2.3 From d71c080ab52333e31af61558ba81b9ed04b3c593 Mon Sep 17 00:00:00 2001 From: Raphael Luba Date: Wed, 20 Jul 2016 17:37:54 +0200 Subject: Replace renamed classes in grid push/pull example (#20330) The example for column ordering still referenced the old push/pull class names. --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..b93f0d8b7 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -442,7 +442,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm ### Example: Column ordering -Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes. +Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.
{% example html %} -- cgit v1.2.3 From a8879c8f82ec3debb8e225844dc4561e2900beda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 23 Jul 2016 17:12:43 -0700 Subject: Follow-up to #19099 for grid fixes - Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col') - Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding - Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports --- docs/layout/grid.md | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..4ce3c3beb 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -180,20 +180,21 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Make the element grid-ready (applying everything but the width) -@mixin make-col($gutter: $grid-gutter-width) { +@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { position: relative; + min-height: 1px; // Prevent collapsing + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. @if $enable-flex { - flex: 1; - } @else { - float: left; + width: 100%; } - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); } -@mixin make-col-span($size, $columns: $grid-columns) { - // Set a width (to be used in or out of media queries) +@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -201,6 +202,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS // do not appear to require this. max-width: percentage($size / $columns); } @else { + float: left; width: percentage($size / $columns); } } @@ -232,23 +234,23 @@ See it in action in this rendered example @include make-row(); } .content-main { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(8); + @include make-col(8); } } .content-secondary { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(4); + @include make-col(4); } } {% endhighlight %} -- cgit v1.2.3 From ded1bf98d796ed9efb5c22eb1cfd8870b336158a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:27:55 -0700 Subject: One more follow up to #19099, #20349, and #20361 Remove mention of base class and fix grid examples --- docs/layout/grid.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8e7c5225e..a69e10b84 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -270,36 +270,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 with the `.col` base class and a modifier within 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 within any `.row`.
{% 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
+
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-8
-
md-4
+
col-md-8
+
col-md-4
-
md-4
-
md-4
-
md-4
+
col-md-4
+
col-md-4
+
col-md-4
-
md-6
-
md-6
+
col-md-6
+
col-md-6
{% endexample %}
-- cgit v1.2.3 From 55795e88450ad13fdcc581a31fa1697fd2f77145 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:36:30 -0700 Subject: Customizing grid docs updates to followup on #19099 - More details on columns and gutters - Break it into clear sections --- docs/layout/grid.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index a69e10b84..2dd86970e 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -459,7 +459,18 @@ Easily change the order of our built-in grid columns with `.push-md-*` and `.pul 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: +### Columns and gutters + +The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters. + +{% highlight scss %} +$grid-columns: 12; +$grid-gutter-width: 30px; +{% endhighlight %} + +### Grid tiers + +Moving beyond the columns themselves, you may also customize the number of grid tiers. 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: ( @@ -475,4 +486,4 @@ $container-max-widths: ( ); {% 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. +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out 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 From 39732a0023857a128df89dcbe898cc4fddb6435d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:39:19 -0700 Subject: 30px not 15px --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 2dd86970e..7114da4b7 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -139,7 +139,7 @@ Variables and maps determine the number of columns, the gutter width, and the me {% highlight scss %} $grid-columns: 12; -$grid-gutter-width: 15px; +$grid-gutter-width: 30px; $grid-breakpoints: ( // Extra small screen / phone -- cgit v1.2.3 From 8e9a9a5960697cd8cd698ca6b4d8733bd7872de6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Jul 2016 21:09:39 -0700 Subject: Enable flexbox grid CSS on our docs page - Creates new flexbox grid Sass file in our docs assets - Updates the Gruntfile to compile said new Sass file and minify the output - Update notice on flexbox docs page for how it works - Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features) --- docs/layout/flexbox-grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 6d372a96c..ea4fad28b 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -9,7 +9,7 @@ Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting- 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. +**Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development. {% endcallout %} ## Contents -- cgit v1.2.3 From 98a8e9947a5d97d8be8b664b6b8c08a7c78937a2 Mon Sep 17 00:00:00 2001 From: Scott Gauthreaux Date: Sat, 6 Aug 2016 15:33:31 -0700 Subject: Updated docs with extra auto resize example I updated the doc with an example of a flex layout of 3 columns where the center column is specified as a `.col-xs-5` to show that other columns will resize no matter what the width of the center column. Experienced bootstrap developers will expect to have to use an even number for the center column width when in reality any size will work. I believe this is quite useful information and doesn't add too much to the docs. Another option would be to make that initial example a `.col-xs-5` instead of a `.col-xs-6` to highlight this fact in the first place. --- docs/layout/flexbox-grid.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index ea4fad28b..ec5a7365e 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -59,7 +59,7 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% 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. +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. Note that the other columns will resize no matter the width of the center column.
{% example html %} @@ -75,6 +75,17 @@ Auto-layout for flexbox grid columns also means you can set the width of one col 3 of 3
+
+
+ 1 of 3 +
+
+ 2 of 3 (wider) +
+
+ 3 of 3 +
+
{% endexample %}
-- cgit v1.2.3 From 86e3a351612b98d5c9ac4a1d43a2947c32845d27 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 19 Aug 2016 21:20:00 -0700 Subject: add some margin utils --- docs/layout/media-object.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index 602bd210a..fcb89a3b5 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -45,7 +45,7 @@ Media components can also be nested.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
+
Generic placeholder image @@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

-
+
Generic placeholder image @@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
+
Generic placeholder image @@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
-
+
Generic placeholder image @@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
-
  • +

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -- cgit v1.2.3 From 0be876359ed4ed7c8a3d315a6ef9a04eede8d765 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 22:16:28 -0700 Subject: Update docs to use new spacing util class names --- docs/layout/media-object.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index fcb89a3b5..6843af7ec 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -45,7 +45,7 @@ Media components can also be nested.

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    +
    Generic placeholder image @@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    -
    +
    Generic placeholder image @@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
    +
    Generic placeholder image @@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
    -
    +
    Generic placeholder image @@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
    • -
  • +

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -- cgit v1.2.3 From a48e8199219d6bbe95079fa8fb206db1b2f5f2bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Sep 2016 22:31:26 -0700 Subject: Fixes #19466: Document the flexbox order utils (#20697) --- docs/layout/flexbox-grid.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index ec5a7365e..d15d6fb99 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -221,3 +221,25 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
    {% endexample %}
    • + +## Reordering + +Flexbox utilities for controlling the **visual order** of your content. + +
    +{% example html %} +
    +
    +
    + First, but unordered +
    +
    + Second, but last +
    +
    + Third, but first +
    +
    +
    +{% endexample %} +
    -- cgit v1.2.3 From 3f01134031b15a934d5e233bb26a407a7e05492b Mon Sep 17 00:00:00 2001 From: Nick Date: Tue, 13 Sep 2016 07:31:05 +0200 Subject: Grid mixins docs should match source code (#20705) --- docs/layout/grid.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 7114da4b7..5b68053aa 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -180,7 +180,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Make the element grid-ready (applying everything but the width) -@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; min-height: 1px; // Prevent collapsing padding-right: ($gutter / 2); @@ -194,7 +194,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } } -@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col($size, $columns: $grid-columns) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -208,14 +208,16 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Get fancy by offsetting, or changing the sort order -@mixin make-col-offset($columns) { - margin-left: percentage(($columns / $grid-columns)); +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); } -@mixin make-col-push($columns) { - left: percentage(($columns / $grid-columns)); + +@mixin make-col-push($size, $columns: $grid-columns) { + left: if($size > 0, percentage($size / $columns), auto); } -@mixin make-col-pull($columns) { - right: percentage(($columns / $grid-columns)); + +@mixin make-col-pull($size, $columns: $grid-columns) { + right: if($size > 0, percentage($size / $columns), auto); } {% endhighlight %} -- cgit v1.2.3 From 0ef64d89f7fbf7c4eb306569b050720e240dde6b Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 9 Sep 2016 06:48:17 +0200 Subject: Add breakpoint-specific gutters. --- docs/layout/grid.md | 55 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 41 insertions(+), 14 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 5b68053aa..d64322dea 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,4 +1,4 @@ ---- +atom--- layout: docs title: Grid system group: layout @@ -33,14 +33,14 @@ Sounds good? Great, let's move on to seeing all that in an example. If you're using Bootstrap's compiled CSS, this the example you'll want to start with. {% example html %} -
    +
    a
    - One of three columns + One of three columnsa
    One of three columns -
    +
    atom
    One of three columns
    @@ -139,7 +139,15 @@ Variables and maps determine the number of columns, the gutter width, and the me {% highlight scss %} $grid-columns: 12; -$grid-gutter-width: 30px; +$grid-gutter-width-base: 30px; + +$grid-gutter-widths: ( + xs: $grid-gutter-width-base, // 30px + sm: $grid-gutter-width-base, // 30px + md: $grid-gutter-width-base, // 30px + lg: $grid-gutter-width-base, // 30px + xl: $grid-gutter-width-base // 30px +) $grid-breakpoints: ( // Extra small screen / phone @@ -168,23 +176,27 @@ 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) { +@mixin make-row($gutters: $grid-gutter-widths) { @if $enable-flex { display: flex; flex-wrap: wrap; } @else { @include clearfix(); } - margin-left: ($gutter / -2); - margin-right: ($gutter / -2); + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + margin-right: ($gutter / -2); + margin-left: ($gutter / -2); + } + } } // Make the element grid-ready (applying everything but the width) -@mixin make-col-ready($gutter: $grid-gutter-width) { +@mixin make-col-ready($gutters: $grid-gutter-widths) { position: relative; min-height: 1px; // Prevent collapsing - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values @@ -192,6 +204,14 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS @if $enable-flex { width: 100%; } + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } } @mixin make-col($size, $columns: $grid-columns) { @@ -463,11 +483,18 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus ### Columns and gutters -The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters. +The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-widths` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters. {% highlight scss %} -$grid-columns: 12; -$grid-gutter-width: 30px; +$grid-columns: 12 !default; +$grid-gutter-width-base: 30px !default; +$grid-gutter-widths: ( + xs: $grid-gutter-width-base, + sm: $grid-gutter-width-base, + md: $grid-gutter-width-base, + lg: $grid-gutter-width-base, + xl: $grid-gutter-width-base +) !default; {% endhighlight %} ### Grid tiers -- cgit v1.2.3 From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:19:47 -0700 Subject: v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements --- docs/layout/flexbox-grid.md | 1 + docs/layout/grid.md | 1 + docs/layout/media-object.md | 1 + docs/layout/overview.md | 1 + docs/layout/responsive-utilities.md | 1 + 5 files changed, 5 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index d15d6fb99..0eae713b3 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -1,6 +1,7 @@ --- layout: docs title: Flexbox grid system +description: Documentation and examples for using Bootstrap's optional flexbox grid system. group: layout --- diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 5b68053aa..ec80156a4 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,6 +1,7 @@ --- layout: docs title: Grid system +description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system. group: layout --- diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index fcb89a3b5..95dbceb40 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -1,6 +1,7 @@ --- layout: docs title: Media object +description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like. group: layout --- diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 81cdecf60..3e6c7e7e0 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -1,6 +1,7 @@ --- layout: docs title: Overview +description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. group: layout redirect_from: "/layout/" --- diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 2a44fd589..4334eb4d6 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -1,6 +1,7 @@ --- layout: docs title: Responsive utilities +description: Use responsive display utility classes for showing and hiding content by device, via media query. group: layout --- -- cgit v1.2.3 From 4699fd4b4076f325652a5f51cd0c734d900faac3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 19:23:10 -0700 Subject: fix typos --- docs/layout/grid.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 47e8f4470..0466fc7bf 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,4 +1,4 @@ -atom--- +--- layout: docs title: Grid system description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system. @@ -34,14 +34,14 @@ Sounds good? Great, let's move on to seeing all that in an example. If you're using Bootstrap's compiled CSS, this the example you'll want to start with. {% example html %} -
    a +
    - One of three columnsa + One of three columns
    One of three columns -
    atom +
    One of three columns
    -- cgit v1.2.3 From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 4 Oct 2016 02:55:59 +1000 Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557) --- docs/layout/flexbox-grid.md | 6 +++--- docs/layout/grid.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 0eae713b3..80db93c93 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -5,9 +5,9 @@ description: Documentation and examples for using Bootstrap's optional flexbox g 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. +Fancy a more modern grid system? [Enable flexbox support in Bootstrap]({{ site.baseurl }}/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. +Bootstrap's flexbox grid includes support for every feature from our [default grid system]({{ site.baseurl }}/layout/grid/), and then some. Please read the [default grid system docs]({{ site.baseurl }}/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!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development. @@ -22,7 +22,7 @@ Bootstrap's flexbox grid includes support for every feature from our [default gr 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. +- [Grid mixins]({{ site.baseurl }}/layout/grid#sass-mixins) and [predefined classes]({{ site.baseurl }}/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support]({{ site.baseurl }}/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 equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 0466fc7bf..26ff36c41 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -246,7 +246,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between. -See it in action in     this rendered example. +See it in action in this rendered example. {% highlight scss %} .container { -- cgit v1.2.3 From 0ba05f4da9d5fc14c926cd1eeeed2119ba6c47a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 12:42:36 -0700 Subject: Update the grid table heading to clarify max width over width Fixes #20688 --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 26ff36c41..68e0d86ec 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -91,7 +91,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Collapsed to start, horizontal above breakpoints - Container width + Max container width None (auto) 576px 720px -- cgit v1.2.3 From 1d0d0dac769cccaa3df62bafb7fb999c2a086adb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 13:51:05 -0700 Subject: Update grid docs to use new values for grid breakpoints and containers --- docs/layout/grid.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 26ff36c41..0785093ea 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -64,11 +64,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Extra small
    - <544px + <576px Small
    - ≥544px + ≥576px Medium
    @@ -93,9 +93,9 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Container width None (auto) - 576px + 540px 720px - 940px + 960px 1140px @@ -154,7 +154,7 @@ $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone - sm: 544px, + sm: 576px, // Medium screen / tablet md: 768px, // Large screen / desktop @@ -164,9 +164,9 @@ $grid-breakpoints: ( ); $container-max-widths: ( - sm: 576px, + sm: 540px, md: 720px, - lg: 940px, + lg: 960px, xl: 1140px ); {% endhighlight %} @@ -512,7 +512,7 @@ $grid-breakpoints: ( $container-max-widths: ( sm: 420px, md: 720px, - lg: 940px + lg: 960px ); {% endhighlight %} -- cgit v1.2.3 From 13cc81c50c473c78e96dc8f5c815782afd81d3b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 13:51:59 -0700 Subject: Update grid docs mention of gutter width value (no more rems for awhile now) --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 0785093ea..5d37880c0 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -112,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Gutter width - 1.875rem / 30px (15px on each side of a column) + 30px (15px on each side of a column) Nestable -- cgit v1.2.3 From 4538ac9b56e6390b4b4ca745dc749195859cb8f3 Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Mon, 24 Oct 2016 11:23:56 -0400 Subject: Add documentation for col-{breakpoint}-auto --- docs/layout/flexbox-grid.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..6fa04bf88 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -91,6 +91,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %}
    +Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. + +
    +{% example html %} +
    +
    +
    + 1 of 3 +
    +
    + Variable width content +
    +
    + 3 of 3 +
    +
    +
    +
    + 1 of 3 +
    +
    + Variable width content +
    +
    + 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`. -- cgit v1.2.3 From abc9a526d525dad86e6fbe062161a66853227c78 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:03:45 -0700 Subject: Fixes #20498: Warn about flexbox bugs in our flex grid docs --- docs/layout/flexbox-grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..4f456e273 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -27,6 +27,7 @@ The flexbox grid system behaves similar to our default grid system, but with a f - 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. +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From 3cc023990369168aa451bf49a69b7fb4a2dcaa67 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:26:23 -0700 Subject: Document our z-index values Fixes #18532 --- docs/layout/overview.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 3e6c7e7e0..5b5ceb16c 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -155,3 +155,23 @@ The Sass mixin for the above example look like that shown beneath: {% highlight scss %} @include media-breakpoint-between(md, lg) { ... } {% endhighlight %} + +## Z-index + +Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more. + +We don't encourage customization of these values; should you change one, you likely need to change them all. + +```scss +$zindex-dropdown-backdrop: 990 !default; +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; +$zindex-navbar-fixed: 1030 !default; +$zindex-navbar-sticky: 1030 !default; +$zindex-modal-bg: 1040 !default; +$zindex-modal: 1050 !default; +``` + +Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. -- cgit v1.2.3 From 115a37db1a21dd249daf852cbd71cbd5ad1b7c3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:31:38 -0700 Subject: Change variable for modal backdrop zindex, rearrange to be ordered from lowest to highest --- docs/layout/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 5b5ceb16c..c22203fde 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -166,12 +166,12 @@ We don't encourage customization of these values; should you change one, you lik $zindex-dropdown-backdrop: 990 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; $zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; +$zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; ``` Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. -- cgit v1.2.3 From 26c33fa5ed0385d486d6a0ed5b79e9bae11dc055 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:49:57 -0700 Subject: unrelated change; bold that stuff to emphasize it --- docs/layout/flexbox-grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 4412466f6..467c3030b 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -26,8 +26,8 @@ The flexbox grid system behaves similar to our default grid system, but with a f - Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system. - 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. -- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). +- 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.** +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From a26080c04723e23da352e8115a108130725faff2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:50:25 -0700 Subject: rework flex grid autolayout docs Adds clearer headings to each section, reworks some copy to be more direct. --- docs/layout/flexbox-grid.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 467c3030b..a26314cd6 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -33,7 +33,11 @@ Chill? Awesome—keep reading for more information and some code snippets. ## Auto-layout columns -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. +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 every column will be the same width. + +### Equal-width + +For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`.
    {% example html %} @@ -61,6 +65,8 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% endexample %}
    +### Setting one column width + 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. Note that the other columns will resize no matter the width of the center column.
    @@ -92,7 +98,9 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %}
    -Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. +### Variable width content + +Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
    {% example html %} -- cgit v1.2.3 From f734814f6ba6c86673f771b073425ca6f7f72693 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:13:05 -0700 Subject: Make spacer utils responsive (#20926) * make spacer utils responsive by grid tier * update scale to add two levels, document them * change responsive spacing utils to avoid the xs abbreviation in the class name for that tier * update code snippet to match source * update usage in our docs * linter * docs updates --- docs/layout/media-object.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index b998490d3..846330604 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -46,7 +46,7 @@ Media components can also be nested.

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
    +
    Generic placeholder image @@ -124,7 +124,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    -
    +
    Generic placeholder image @@ -132,7 +132,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
    +
    Generic placeholder image @@ -146,7 +146,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
    -
    +
    Generic placeholder image @@ -159,7 +159,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
    -
  • +

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -- cgit v1.2.3 From cec0c7c6d6c6926dd372a91172c0081bb09fcc09 Mon Sep 17 00:00:00 2001 From: Eric Nolte Date: Fri, 4 Nov 2016 10:54:34 -0600 Subject: Update docs to reflect new breakpoint naming convention --- docs/layout/flexbox-grid.md | 34 +++++++++++++-------------- docs/layout/grid.md | 46 ++++++++++++++++++------------------- docs/layout/responsive-utilities.md | 26 ++++++++++----------- 3 files changed, 53 insertions(+), 53 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index a26314cd6..eafe7b59c 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -76,7 +76,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
    1 of 3
    -
    +
    2 of 3 (wider)
    @@ -87,7 +87,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
    1 of 3
    -
    +
    2 of 3 (wider)
    @@ -109,7 +109,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
    1 of 3
    -
    +
    Variable width content
    @@ -120,7 +120,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
    1 of 3
    -
    +
    Variable width content
    @@ -133,16 +133,16 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the ## 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`. +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-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)
    @@ -220,42 +220,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 55607e464..ea0a9862b 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -335,21 +335,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-12 .col-md-8
    +
    .col-6 .col-md-4
    -
    .col-xs-6 .col-md-4
    -
    .col-xs-6 .col-md-4
    -
    .col-xs-6 .col-md-4
    +
    .col-6 .col-md-4
    +
    .col-6 .col-md-4
    +
    .col-6 .col-md-4
    -
    .col-xs-6
    -
    .col-xs-6
    +
    .col-6
    +
    .col-6
    {% endexample %}
    @@ -361,15 +361,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-12 .col-sm-6 .col-md-8
    +
    .col-6 .col-md-4
    -
    .col-xs-6 .col-sm-4
    -
    .col-xs-6 .col-sm-4
    +
    .col-6 .col-sm-4
    +
    .col-6 .col-sm-4
    -
    .col-xs-6 .col-sm-4
    +
    .col-6 .col-sm-4
    {% endexample %}
    @@ -381,9 +381,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-9
    +
    .col-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    +
    .col-6
    Subsequent columns continue along the new line.
    {% endexample %}
    @@ -395,14 +395,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-6 .col-sm-3
    +
    .col-6 .col-sm-3
    -
    .col-xs-6 .col-sm-3
    -
    .col-xs-6 .col-sm-3
    +
    .col-6 .col-sm-3
    +
    .col-6 .col-sm-3
    {% endexample %}
    @@ -453,11 +453,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
    Level 1: .col-sm-9
    -
    - Level 2: .col-xs-8 .col-sm-6 +
    + Level 2: .col-8 .col-sm-6
    -
    - Level 2: .col-xs-4 .col-sm-6 +
    + Level 2: .col-4 .col-sm-6
    diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 4334eb4d6..6a7a1bb09 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -172,19 +172,19 @@ Resize your browser or load on different devices to test the responsive utility Green checkmarks indicate the element **is visible** in your current viewport.
    -
    +
    ✔ Visible on extra small Extra small
    -
    +
    ✔ Visible on small or narrower Small or narrower
    -
    +
    ✔ Visible on medium or narrower Medium or narrower
    -
    +
    ✔ Visible on large or narrower Large or narrower
    @@ -193,19 +193,19 @@ Green checkmarks indicate the element **is visible** in your current viewport.
    -
    +
    ✔ Visible on small or wider Small or wider
    -
    +
    ✔ Visible on medium or wider Medium or wider
    -
    +
    ✔ Visible on large or wider Large or wider
    -
    +
    ✔ Visible on extra large Extra large
    @@ -214,26 +214,26 @@ Green checkmarks indicate the element **is visible** in your current viewport.
    -
    +
    ✔ Your viewport is exactly extra small Your viewport is NOT exactly extra small
    -
    +
    ✔ Your viewport is exactly small Your viewport is NOT exactly small
    -
    +
    ✔ Your viewport is exactly medium Your viewport is NOT exactly medium
    -
    +
    ✔ Your viewport is exactly large Your viewport is NOT exactly large
    -
    +
    ✔ Your viewport is exactly extra large Your viewport is NOT exactly extra large
    -- cgit v1.2.3 From b4dbc69f0edba28ea1a9be4aacb3e9f68c3604a9 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 8 Nov 2016 23:36:04 +1100 Subject: Fix broken and redirected links. --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index c22203fde..e4d6bc49e 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -47,7 +47,7 @@ Use `.container-fluid` for a full width container, spanning the entire width of ## Responsive breakpoints -Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. +Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. -- cgit v1.2.3 From 83c8bfa30d4d906ff7f2e37314e99e1098eb9bce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Nov 2016 14:01:06 -0800 Subject: Fixes #21195: Add more table of contents to pages with longer contents --- docs/layout/overview.md | 5 +++++ docs/layout/responsive-utilities.md | 5 +++++ 2 files changed, 10 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index e4d6bc49e..758854b8a 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -8,6 +8,11 @@ redirect_from: "/layout/" Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Containers Containers are the most basic layout element in Bootstrap and are **required when using our grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 6a7a1bb09..69f6ae1be 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -9,6 +9,11 @@ For faster mobile-friendly development, use these utility classes for showing an Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Available classes * The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports. -- cgit v1.2.3 From 050ba7390c9642ac72b0477340f274e40e14ced6 Mon Sep 17 00:00:00 2001 From: Fumito Mizuno Date: Sat, 26 Nov 2016 15:47:40 +0900 Subject: grid-breakpoint fix grid-breakpoint for sm is 576px https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L186 current document shows 544px, but it should be 576px --- docs/layout/overview.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 758854b8a..8ed7671a9 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -57,11 +57,11 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) +// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } @@ -93,8 +93,8 @@ Since we write our source CSS in Sass, all our media queries are available via S We occasionally use media queries that go in the other direction (the given screen size *or smaller*): {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767px) { ... } @@ -121,11 +121,11 @@ Once again, these media queries are also available via Sass mixins: We also have media between the breakpoint's minimum and maximum widths for only the given screen size: {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) and (max-width: 767px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) and (max-width: 767px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991px) { ... } -- cgit v1.2.3 From ec5e7e5e5acdc56240eef0690881728a046da46e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 12:13:15 -0800 Subject: Add .no-gutters option to remove gutters from rows (#21211) Fixes #19107. --- docs/layout/grid.md | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index ea0a9862b..8c0d32917 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -22,7 +22,7 @@ At a high level, here's how the grid system works: - Content should be placed within columns, and only columns may be immediate children of rows. - Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So if you want three equal-width columns, you'd use `.col-sm-4`. - Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element. -- Columns have horizontal `padding` to create the gutters between individual columns. +- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`. - There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/layout/overview/#responsive-breakpoints): extra small, small, medium, large, and extra large. - Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices). - You can use predefined grid classes or Sass mixins for more semantic markup. @@ -374,6 +374,35 @@ Build on the previous example by creating even more dynamic and powerful layouts {% endexample %}
    +### Example: Remove gutters + +The gutters between columns in our default, predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns. + +Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{ site.baseurl }}/utilities/spacing/). + +{% highlight sass %} +.no-gutters { + margin-right: 0; + margin-left: 0; + + > [class*="col-"] { + padding-right: 0; + padding-left: 0; + } +} +{% endhighlight %} + +In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more). + +
    +{% example html %} +
    +
    .col-12 .col-sm-6 .col-md-8
    +
    .col-6 .col-md-4
    +
    +{% endexample %} +
    + ### Example: Column wrapping If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. -- cgit v1.2.3 From b1e8d60348ab84895b7b722487a03264a53aedfb Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sat, 26 Nov 2016 21:33:46 -0700 Subject: Remove 'xs' from text utilities (#21217) --- docs/layout/grid.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8c0d32917..8de8ccf46 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a - + Extra small
    <576px - + Small
    ≥576px - + Medium
    ≥768px - + Large
    ≥992px - + Extra large
    ≥1200px -- cgit v1.2.3 From 8d031090d0f2a42b392b3452416539334562e3a7 Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 27 Nov 2016 16:19:27 -0700 Subject: Rename `.flex-xs-*` and `.flex-items-xs-*` to `.flex-*` and `.flex-items-*` (#21218) * Clean up _flex.scss a little This commit just cleans up the formating of _flex.scss by changing it so that it uses a single `@include media-breakpoint-up` instead of multiple. It also aligns all of the CSS properties so it looks a bit nicer. * Remove `-xs` from flex classes --- docs/layout/flexbox-grid.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index eafe7b59c..482392504 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
    {% example html %}
    -
    +
    One of three columns
    @@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns
    -
    +
    One of three columns
    @@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns
    -
    +
    One of three columns
    @@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
    -
    +
    One of three columns
    -
    +
    One of three columns
    -
    +
    One of three columns
    @@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
    {% example html %}
    -
    +
    One of two columns
    @@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
    -
    +
    One of two columns
    @@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
    -
    +
    One of two columns
    @@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
    -
    +
    One of two columns
    @@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
    -
    +
    One of two columns
    @@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content. {% example html %}
    -
    +
    First, but unordered
    -
    +
    Second, but last
    -
    +
    Third, but first
    -- cgit v1.2.3 From 08e36a3cc9f88077806efb5c69f02e1ca6e0b449 Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 27 Nov 2016 23:47:00 -0700 Subject: Rename `.col-xs` to `.col` + some other cleanup (#21222) * Use `breakpoint-min` instead of a counter * Remove 'xs' from flexbox grid --- docs/layout/flexbox-grid.md | 56 ++++++++++++++++++++++----------------------- docs/layout/grid.md | 5 ++-- 2 files changed, 31 insertions(+), 30 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 482392504..c6430424a 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -43,21 +43,21 @@ For example, here are two grid layouts that apply to every device and viewport, {% example html %}
    -
    +
    1 of 2
    -
    +
    1 of 2
    -
    +
    1 of 3
    -
    +
    1 of 3
    -
    +
    1 of 3
    @@ -73,24 +73,24 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% example html %}
    -
    +
    1 of 3
    2 of 3 (wider)
    -
    +
    3 of 3
    -
    +
    1 of 3
    2 of 3 (wider)
    -
    +
    3 of 3
    @@ -106,24 +106,24 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the {% example html %}
    -
    +
    1 of 3
    Variable width content
    -
    +
    3 of 3
    -
    +
    1 of 3
    Variable width content
    -
    +
    3 of 3
    @@ -158,35 +158,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
    @@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
    -
    +
    One of three columns
    -
    +
    One of three columns
    -
    +
    One of three columns
    @@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content. {% example html %}
    -
    +
    First, but unordered
    -
    +
    Second, but last
    -
    +
    Third, but first
    diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8de8ccf46..68d7f7020 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -100,7 +100,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Class prefix - .col-xs- + .col- .col-sm- .col-md- .col-lg- @@ -329,7 +329,7 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst ### Example: Mobile and desktop -Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works. +Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
    {% example html %} @@ -385,6 +385,7 @@ Here's the source code for creating these styles. Note that column overrides are margin-right: 0; margin-left: 0; + > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; -- cgit v1.2.3 From d04eb86715ea5842e9032e5c3bc3b70622b15fcd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 10 Dec 2016 17:03:32 -0800 Subject: clarify that --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 8ed7671a9..4dcb294dc 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -15,7 +15,7 @@ Bootstrap includes several components and options for laying out your project, i ## Containers -Containers are the most basic layout element in Bootstrap and are **required when using our grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). +Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). While containers *can* be nested, most layouts do not require a nested container. -- cgit v1.2.3 From eb2e1102be0f4641ee3e5c4e7853360d5a04e3d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2016 20:26:17 -0800 Subject: Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom --- docs/layout/flexbox-grid.md | 286 -------------------- docs/layout/grid.md | 647 +++++++++++++++++++++++++++++--------------- docs/layout/media-object.md | 4 - docs/layout/overview.md | 2 +- 4 files changed, 428 insertions(+), 511 deletions(-) delete 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 deleted file mode 100644 index c6430424a..000000000 --- a/docs/layout/flexbox-grid.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -layout: docs -title: Flexbox grid system -description: Documentation and examples for using Bootstrap's optional flexbox grid system. -group: layout ---- - -Fancy a more modern grid system? [Enable flexbox support in Bootstrap]({{ site.baseurl }}/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]({{ site.baseurl }}/layout/grid/), and then some. Please read the [default grid system docs]({{ site.baseurl }}/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!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development. -{% 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]({{ site.baseurl }}/layout/grid#sass-mixins) and [predefined classes]({{ site.baseurl }}/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support]({{ site.baseurl }}/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 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.** -- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). - -Chill? Awesome—keep reading for more information and some code snippets. - -## Auto-layout columns - -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 every column will be the same width. - -### Equal-width - -For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. - -
    -{% example html %} -
    -
    -
    - 1 of 2 -
    -
    - 1 of 2 -
    -
    -
    -
    - 1 of 3 -
    -
    - 1 of 3 -
    -
    - 1 of 3 -
    -
    -
    -{% endexample %} -
    - -### Setting one column width - -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. Note that the other columns will resize no matter the width of the center column. - -
    -{% example html %} -
    -
    -
    - 1 of 3 -
    -
    - 2 of 3 (wider) -
    -
    - 3 of 3 -
    -
    -
    -
    - 1 of 3 -
    -
    - 2 of 3 (wider) -
    -
    - 3 of 3 -
    -
    -
    -{% endexample %} -
    - -### Variable width content - -Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes. - -
    -{% example html %} -
    -
    -
    - 1 of 3 -
    -
    - Variable width content -
    -
    - 3 of 3 -
    -
    -
    -
    - 1 of 3 -
    -
    - Variable width content -
    -
    - 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-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) -
    -
    -
    -{% 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 %} -
    - -## 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 %} -
    - -## Reordering - -Flexbox utilities for controlling the **visual order** of your content. - -
    -{% example html %} -
    -
    -
    - First, but unordered -
    -
    - Second, but last -
    -
    - Third, but first -
    -
    -
    -{% endexample %} -
    diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 68d7f7020..d7391025f 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,11 +1,11 @@ --- layout: docs title: Grid system -description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system. +description: Documentation and examples for using Bootstrap's responsive flexbox grid system. group: layout --- -Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and has multiple tiers, one for each [media query range]({{ site.baseurl }}/layout/overview/#responsive-breakpoints). You can use it with Sass mixins or our predefined classes. +Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and has multiple tiers, one for each [media query range]({{ site.baseurl }}/layout/overview/#responsive-breakpoints). You can use it with Sass mixins or our predefined classes. ## Contents @@ -14,43 +14,43 @@ Bootstrap includes a powerful mobile-first grid system for building layouts of a ## How it works -At a high level, here's how the grid system works: +Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together. -- There are three major components—containers, rows, and columns. -- Containers—`.container` for fixed width or `.container-fluid` for full width—center your site's contents and help align your grid content. -- Rows are horizontal groups of columns that ensure your columns are lined up properly. -- Content should be placed within columns, and only columns may be immediate children of rows. -- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So if you want three equal-width columns, you'd use `.col-sm-4`. -- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element. -- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`. -- There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/layout/overview/#responsive-breakpoints): extra small, small, medium, large, and extra large. -- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices). -- You can use predefined grid classes or Sass mixins for more semantic markup. - -Sounds good? Great, let's move on to seeing all that in an example. - -## Quick start example - -If you're using Bootstrap's compiled CSS, this the example you'll want to start with. - -{% example html %} +
    -
    +
    One of three columns
    -
    +
    One of three columns
    -
    +
    One of three columns
    -{% endexample %} +
    The above example creates three equal-width columns on small, medium, large, and extra large devices using our [predefined grid classes](#predefined-classes). Those columns are centered in the page with the parent `.container`. +Breaking it down, here's how it works: + +- Containers (outlined in blue above) provide a means to center your site's contents. Use `.container` for fixed width or `.container-fluid` for full width. +- Rows (outlined in red above) are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on `.row` to ensure all your content is aligned properly down the left side. +- Content should be placed within columns, and only columns may be immediate children of rows. +- Thanks to flexbox, grid columns without a set width will automatically layout with equal widths. For example, four instances of `.col-sm` will each automatically be 25% wide for small breakpoints. +- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use `.col-sm-4`. +- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element. +- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`. +- There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/layout/overview/#responsive-breakpoints): all breakpoints (extra small), small, medium, large, and extra large. +- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices). +- You can use predefined grid classes or Sass mixins for more semantic markup. + +Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). + +Sounds good? Great, let's move on to seeing all that in an example. + ## 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). @@ -130,212 +130,156 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
    -## Sass mixins - -When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts. - -### Variables - -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-base: 30px; - -$grid-gutter-widths: ( - xs: $grid-gutter-width-base, // 30px - sm: $grid-gutter-width-base, // 30px - md: $grid-gutter-width-base, // 30px - lg: $grid-gutter-width-base, // 30px - xl: $grid-gutter-width-base // 30px -) - -$grid-breakpoints: ( - // Extra small screen / phone - xs: 0, - // Small screen / phone - sm: 576px, - // Medium screen / tablet - md: 768px, - // Large screen / desktop - lg: 992px, - // Extra large screen / wide desktop - xl: 1200px -); - -$container-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px -); -{% endhighlight %} - -### Mixins - -Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns. - -{% highlight scss %} -// Creates a wrapper for a series of columns -@mixin make-row($gutters: $grid-gutter-widths) { - @if $enable-flex { - display: flex; - flex-wrap: wrap; - } @else { - @include clearfix(); - } - - @each $breakpoint in map-keys($gutters) { - @include media-breakpoint-up($breakpoint) { - $gutter: map-get($gutters, $breakpoint); - margin-right: ($gutter / -2); - margin-left: ($gutter / -2); - } - } -} - -// Make the element grid-ready (applying everything but the width) -@mixin make-col-ready($gutters: $grid-gutter-widths) { - position: relative; - min-height: 1px; // Prevent collapsing +## Auto-layout columns - // Prevent columns from becoming too narrow when at smaller grid tiers by - // always setting `width: 100%;`. This works because we use `flex` values - // later on to override this initial width. - @if $enable-flex { - width: 100%; - } +Utilize breakpoint-specific column classes for equal-width columns. Add any number of unit-less classes for each breakpoint you need and every column will be the same width. - @each $breakpoint in map-keys($gutters) { - @include media-breakpoint-up($breakpoint) { - $gutter: map-get($gutters, $breakpoint); - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); - } - } -} +### Equal-width -@mixin make-col($size, $columns: $grid-columns) { - @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 { - float: left; - width: percentage($size / $columns); - } -} +For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. -// Get fancy by offsetting, or changing the sort order -@mixin make-col-offset($size, $columns: $grid-columns) { - margin-left: percentage($size / $columns); -} - -@mixin make-col-push($size, $columns: $grid-columns) { - left: if($size > 0, percentage($size / $columns), auto); -} +
    +{% example html %} +
    +
    +
    + 1 of 2 +
    +
    + 1 of 2 +
    +
    +
    +
    + 1 of 3 +
    +
    + 1 of 3 +
    +
    + 1 of 3 +
    +
    +
    +{% endexample %} +
    -@mixin make-col-pull($size, $columns: $grid-columns) { - right: if($size > 0, percentage($size / $columns), auto); -} -{% endhighlight %} +### Setting one column width -### Example usage +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. Note that the other columns will resize no matter the width of the center column. -You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between. +
    +{% example html %} +
    +
    +
    + 1 of 3 +
    +
    + 2 of 3 (wider) +
    +
    + 3 of 3 +
    +
    +
    +
    + 1 of 3 +
    +
    + 2 of 3 (wider) +
    +
    + 3 of 3 +
    +
    +
    +{% endexample %} +
    -See it in action in this rendered example. +### Variable width content -{% highlight scss %} -.container { - max-width: 60em; - @include make-container(); -} -.row { - @include make-row(); -} -.content-main { - @include make-col-ready(); +Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes. - @media (max-width: 32em) { - @include make-col(6); - } - @media (min-width: 32.1em) { - @include make-col(8); - } -} -.content-secondary { - @include make-col-ready(); - - @media (max-width: 32em) { - @include make-col(6); - } - @media (min-width: 32.1em) { - @include make-col(4); - } -} -{% endhighlight %} - -{% highlight html %} +
    +{% example html %}
    +
    +
    + 1 of 3 +
    +
    + Variable width content +
    +
    + 3 of 3 +
    +
    -
    ...
    -
    ...
    +
    + 1 of 3 +
    +
    + Variable width content +
    +
    + 3 of 3 +
    -{% endhighlight %} +{% endexample %} +
    -## Predefined classes +## Responsive classes -In addition to our semantic mixins, Bootstrap includes an extensive set of prebuilt classes for quickly creating grid columns. It includes options for device-based column sizing, reordering columns, and more. +Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. -### Example: Stacked-to-horizontal +### All breakpoints -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 within any `.row`. +For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
    {% 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
    +
    col
    +
    col
    +
    col
    +
    col
    -
    col-md-8
    -
    col-md-4
    +
    col-8
    +
    col-4
    +
    +{% endexample %}
    + +### Stacked to horizontal + +Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices. + +
    +{% example html %}
    -
    col-md-4
    -
    col-md-4
    -
    col-md-4
    +
    col-sm-8
    +
    col-sm-4
    -
    col-md-6
    -
    col-md-6
    +
    col-sm
    +
    col-sm
    +
    col-sm
    {% endexample %}
    -### Example: Mobile and desktop +### Mix and match -Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works. +Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
    {% example html %}
    -
    .col-12 .col-md-8
    +
    .col .col-md-8
    .col-6 .col-md-4
    @@ -354,29 +298,122 @@ Don't want your columns to simply stack in smaller devices? Use the extra small {% endexample %}
    -### Example: Mobile, tablet, desktop +## Alignment + +Use flexbox alignment utilities to vertically and horizontally align columns. -Build on the previous example by creating even more dynamic and powerful layouts with tablet `.col-sm-*` classes. +### Vertical alignment
    {% example html %} -
    -
    .col-12 .col-sm-6 .col-md-8
    -
    .col-6 .col-md-4
    +
    +
    +
    + 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 +
    +
    -
    -
    .col-6 .col-sm-4
    -
    .col-6 .col-sm-4
    - -
    -
    .col-6 .col-sm-4
    +{% endexample %} +
    + +
    +{% example html %} +
    +
    +
    + One of three columns +
    +
    + One of three columns +
    +
    + One of three columns +
    +
    +
    +{% endexample %} +
    + +### Horizontal alignment + +
    +{% 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 %}
    -### Example: Remove gutters +### No gutters -The gutters between columns in our default, predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns. +The gutters between columns in our predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns. Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{ site.baseurl }}/utilities/spacing/). @@ -404,7 +441,7 @@ In practice, here's how it looks. Note you can continue to use this with all oth {% endexample %}
    -### Example: Column wrapping +### Column wrapping If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. @@ -418,9 +455,9 @@ If more than 12 columns are placed within a single row, each group of extra colu {% endexample %}
    -### Example: Responsive column resets +### Column resets -With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/). +With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/).
    {% example html %} @@ -453,7 +490,31 @@ In addition to column clearing at responsive breakpoints, you may need to **rese {% endexample %}
    -### Example: Offsetting columns +## Reordering + +### Flex order + +Use flexbox utilities for controlling the **visual order** of your content. + +
    +{% example html %} +
    +
    +
    + First, but unordered +
    +
    + Second, but last +
    +
    + Third, but first +
    +
    +
    +{% endexample %} +
    + +### Offsetting 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. @@ -473,7 +534,20 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t {% endexample %}
    -### Example: Nesting columns +### Push and pull + +Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes. + +
    +{% example html %} +
    +
    .col-md-9 .push-md-3
    +
    .col-md-3 .pull-md-9
    +
    +{% endexample %} +
    + +## Nesting To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). @@ -495,18 +569,151 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm {% endexample %}
    -### Example: Column ordering +## Sass mixins -Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes. +When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts. -
    -{% example html %} -
    -
    .col-md-9 .push-md-3
    -
    .col-md-3 .pull-md-9
    -
    -{% endexample %} +### Variables + +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-base: 30px; + +$grid-gutter-widths: ( + xs: $grid-gutter-width-base, // 30px + sm: $grid-gutter-width-base, // 30px + md: $grid-gutter-width-base, // 30px + lg: $grid-gutter-width-base, // 30px + xl: $grid-gutter-width-base // 30px +) + +$grid-breakpoints: ( + // Extra small screen / phone + xs: 0, + // Small screen / phone + sm: 576px, + // Medium screen / tablet + md: 768px, + // Large screen / desktop + lg: 992px, + // Extra large screen / wide desktop + xl: 1200px +); + +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px +); +{% endhighlight %} + +### Mixins + +Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns. + +{% highlight scss %} +// Creates a wrapper for a series of columns +@mixin make-row($gutters: $grid-gutter-widths) { + display: flex; + flex-wrap: wrap; + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + margin-right: ($gutter / -2); + margin-left: ($gutter / -2); + } + } +} + +// Make the element grid-ready (applying everything but the width) +@mixin make-col-ready($gutters: $grid-gutter-widths) { + position: relative; + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + min-height: 1px; // Prevent collapsing + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } +} + +@mixin make-col($size, $columns: $grid-columns) { + flex: 0 0 percentage($size / $columns); + width: 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); +} + +// Get fancy by offsetting, or changing the sort order +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); +} + +@mixin make-col-push($size, $columns: $grid-columns) { + left: if($size > 0, percentage($size / $columns), auto); +} + +@mixin make-col-pull($size, $columns: $grid-columns) { + right: if($size > 0, percentage($size / $columns), auto); +} +{% endhighlight %} + +### Example usage + +You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between. + +See it in action in this rendered example. + +{% highlight scss %} +.container { + max-width: 60em; + @include make-container(); +} +.row { + @include make-row(); +} +.content-main { + @include make-col-ready(); + + @media (max-width: 32em) { + @include make-col(6); + } + @media (min-width: 32.1em) { + @include make-col(8); + } +} +.content-secondary { + @include make-col-ready(); + + @media (max-width: 32em) { + @include make-col(6); + } + @media (min-width: 32.1em) { + @include make-col(4); + } +} +{% endhighlight %} + +{% highlight html %} +
    +
    +
    ...
    +
    ...
    +
    +{% endhighlight %} ## Customizing the grid diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index 846330604..a42cda40f 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -7,10 +7,6 @@ group: layout The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) is an abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc). Included is support for left and right aligned content, content alignment options, nesting, and more. -{% callout info %} -**Heads up!** When [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) is enabled, the media object will use `flex` styles wherever possible. -{% endcallout %} - ## Contents * Will be replaced with the ToC, excluding the "Contents" header diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 4dcb294dc..ee21b70f2 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -6,7 +6,7 @@ group: layout redirect_from: "/layout/" --- -Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. +Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes. ## Contents -- cgit v1.2.3 From 800cfa24ad55fc7d6a4af363a385c84d8d3bf3f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 20:53:10 -0800 Subject: overhauls media object docs - better copy and examples throughout - callout on flexbug #12 for inline elements like links and images (which is the problem in #20408) - add order section --- docs/layout/media-object.md | 156 ++++++++++++++++++-------------------------- 1 file changed, 63 insertions(+), 93 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index a42cda40f..662f72c25 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -5,50 +5,53 @@ description: Documentation and examples for Bootstrap's media object to construc group: layout --- -The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) is an abstract element used as the basis for building more complex and repetitive components (like blog comments, Tweets, etc). Included is support for left and right aligned content, content alignment options, nesting, and more. +The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Default media +## Example -The default media allow to float a media object (images, video, audio) to the left or right of a content block. +Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{ site.baseurl }}/utilities/spacing/). {% example html %}
    - - Generic placeholder image - + Generic placeholder image
    -

    Media heading

    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
    Media heading
    + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    {% endexample %} +{% callout warning %} +##### Flexbug #12: Inline elements aren't treated as flex items + +Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/utilities/display-property/), as an easy fix. + +**Source:** [Flexbugs on GitHub](https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items) +{% endcallout %} + ## Nesting -Media components can also be nested. +Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object. {% example html %}
    -
    - - Generic placeholder image - -
    + Generic placeholder image
    -

    Media heading

    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
    Media heading
    + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
    - - Generic placeholder image + + Generic placeholder image
    -

    Nested media heading

    - Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
    Media heading
    + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    @@ -57,18 +60,14 @@ Media components can also be nested. ## Alignment -The images or other media can be aligned top, middle, or bottom. The default is top aligned. +Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content. {% example html %}
    -
    - - Generic placeholder image - -
    + Generic placeholder image
    -

    Top aligned media

    -

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    +
    Top-aligned media
    +

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    @@ -76,94 +75,65 @@ The images or other media can be aligned top, middle, or bottom. The default is {% example html %}
    -
    - - Generic placeholder image - -
    + Generic placeholder image
    -

    Middle aligned media

    -

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    -

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +
    Center-aligned media
    +

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    +

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    {% endexample %} {% example html %}
    -
    - - Generic placeholder image - + Generic placeholder image +
    +
    Bottom-aligned media
    +

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    +

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +
    +{% endexample %} + +## Order + +Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing). + +{% example html %} +
    -

    Bottom aligned media

    -

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    -

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +
    Media object
    + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    + Generic placeholder image
    {% endexample %} ## Media list -With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists). +Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your `