diff --git a/docs/layout/grid.md b/docs/layout/grid.md index ea0a9862b928..8c0d329173bb 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. diff --git a/scss/_grid.scss b/scss/_grid.scss index 24cf74dda803..9235ace05660 100644 --- 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