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