From a2920149f43e80a411f2f2cf0dd43a84147a82b1 Mon Sep 17 00:00:00 2001 From: Ryan Worth Date: Thu, 7 Jun 2018 16:39:58 +1000 Subject: [PATCH 1/4] Negative Margins classes for custom col gutters Feature request #26681 --- scss/utilities/_spacing.scss | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index b2e2354b12..6191b9b965 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -30,6 +30,31 @@ } // Some special margin utils + + // Negative margins i.e. mb-n1 is the inverse or negative of mb-1 + @each $prop, $abbrev in (margin: m) { + @each $size, $length in $spacers { + + .#{$abbrev}#{$infix}-n#{$size} { #{$prop}: -$length !important; } + .#{$abbrev}t#{$infix}-n#{$size}, + .#{$abbrev}y#{$infix}-n#{$size} { + #{$prop}-top: -$length !important; + } + .#{$abbrev}r#{$infix}-n#{$size}, + .#{$abbrev}x#{$infix}-n#{$size} { + #{$prop}-right: -$length !important; + } + .#{$abbrev}b#{$infix}-n#{$size}, + .#{$abbrev}y#{$infix}-n#{$size} { + #{$prop}-bottom: -$length !important; + } + .#{$abbrev}l#{$infix}-n#{$size}, + .#{$abbrev}x#{$infix}-n#{$size} { + #{$prop}-left: -$length !important; + } + } + } + .m#{$infix}-auto { margin: auto !important; } .mt#{$infix}-auto, .my#{$infix}-auto { From 0153f7d8cda74ab2bcdddc8a3dcfed8436040969 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2018 17:28:37 -0700 Subject: [PATCH 2/4] add docs --- docs/4.1/utilities/spacing.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/4.1/utilities/spacing.md b/docs/4.1/utilities/spacing.md index b374748e03..dad1c00852 100644 --- a/docs/4.1/utilities/spacing.md +++ b/docs/4.1/utilities/spacing.md @@ -81,3 +81,25 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente Centered element {% endhighlight %} + +### Negative margin + +In CSS, `margin` properties can utilize negative values (`padding` cannot). As of 4.2, we've added negative margin utilities for every non-zero integer size listed above (e.g., `1`, `2`, `3`, `4`, `5`). These utilities are ideal for customizing grid column gutters across breakpoints. + +The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`: + +{% highlight scss %} +.mt-n1 { + margin-top: -0.25rem !important; +} +{% endhighlight %} + +Here's an example of customizing the Bootstrap grid at the medium (`md`) breakpoint and above. We've increased the `.col` padding with `.px-md-5` and then counteracted that with `.mx-md-n5` on the parent `.row`. + +{% capture example %} +
+
Custom column padding
+
Custom column padding
+
+{% endcapture %} +{% include example.html content=example %} From 7e96979ceaa97e42844112ae9649b20cf08e89d0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2018 17:29:01 -0700 Subject: [PATCH 3/4] fix comment placement, remove unecessary prop wrapper --- scss/utilities/_spacing.scss | 37 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 6191b9b965..c43387dec1 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -8,7 +8,6 @@ @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { @@ -29,32 +28,30 @@ } } - // Some special margin utils - - // Negative margins i.e. mb-n1 is the inverse or negative of mb-1 - @each $prop, $abbrev in (margin: m) { - @each $size, $length in $spacers { - - .#{$abbrev}#{$infix}-n#{$size} { #{$prop}: -$length !important; } - .#{$abbrev}t#{$infix}-n#{$size}, - .#{$abbrev}y#{$infix}-n#{$size} { - #{$prop}-top: -$length !important; + // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`) + @each $size, $length in $spacers { + @if not $size == 0 { + .m#{$infix}-n#{$size} { margin: -$length !important; } + .mt#{$infix}-n#{$size}, + .my#{$infix}-n#{$size} { + margin-top: -$length !important; } - .#{$abbrev}r#{$infix}-n#{$size}, - .#{$abbrev}x#{$infix}-n#{$size} { - #{$prop}-right: -$length !important; + .mr#{$infix}-n#{$size}, + .mx#{$infix}-n#{$size} { + margin-right: -$length !important; } - .#{$abbrev}b#{$infix}-n#{$size}, - .#{$abbrev}y#{$infix}-n#{$size} { - #{$prop}-bottom: -$length !important; + .mb#{$infix}-n#{$size}, + .my#{$infix}-n#{$size} { + margin-bottom: -$length !important; } - .#{$abbrev}l#{$infix}-n#{$size}, - .#{$abbrev}x#{$infix}-n#{$size} { - #{$prop}-left: -$length !important; + .ml#{$infix}-n#{$size}, + .mx#{$infix}-n#{$size} { + margin-left: -$length !important; } } } + // Some special margin utils .m#{$infix}-auto { margin: auto !important; } .mt#{$infix}-auto, .my#{$infix}-auto { From b0b28c81e50bedff322b12c13707c97982b4d455 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2018 18:18:13 -0700 Subject: [PATCH 4/4] add grid docs mention --- docs/4.1/layout/grid.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/4.1/layout/grid.md b/docs/4.1/layout/grid.md index 5d341b68a1..9527abbc17 100644 --- a/docs/4.1/layout/grid.md +++ b/docs/4.1/layout/grid.md @@ -324,6 +324,20 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of {% include example.html content=example %} +### Gutters + +Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the `.row` and matching padding utilities on the `.col`s. + +Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5` and then counteracted that with `.mx-lg-n5` on the parent `.row`. + +{% capture example %} +
+
Custom column padding
+
Custom column padding
+
+{% endcapture %} +{% include example.html content=example %} + ## Alignment Use flexbox alignment utilities to vertically and horizontally align columns.