Add .no-gutters option to remove gutters from rows (#21211)

Fixes #19107.

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index ea0a9862b92876e26211ec795284a40d4bf37e43..8c0d329173bbe0248362ada0d489e4ccd03c8306 100644 (file)
--- 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 %}
 </div>
 
+### 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).
+
+<div class="bd-example-row">
+{% example html %}
+<div class="row no-gutters">
+  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
+  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+</div>
+{% endexample %}
+</div>
+
 ### 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.

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 24cf74dda8037beedbabcdea49cc5349950cc97b..9235ace0566034a29b4ffea713701692aa7f074f 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -28,6 +28,18 @@
   .row {
     @include make-row();
   }
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  .no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    > [class*="col-"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
 }
 
 // Columns