diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 46ed466275..509b4cec57 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -306,6 +306,38 @@ {% endhighlight %} +

Remove gutters

+

Remove the gutters from a row and it's columns with the .row-no-gutters class.

+
+
.col-xs-12 .col-md-8
+
.col-xs-6 .col-md-4
+
+
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
+
+
.col-xs-6
+
.col-xs-6
+
+{% highlight html %} +
+
.col-xs-12 .col-md-8
+
.col-xs-6 .col-md-4
+
+
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
+
+
.col-xs-6
+
.col-xs-6
+
+{% endhighlight %} + +

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html index 59134bdfcf..72dc82d888 100644 --- a/docs/_includes/nav/css.html +++ b/docs/_includes/nav/css.html @@ -20,6 +20,7 @@
  • Ex: Mobile, tablet, desktop
  • Ex: Column wrapping
  • Responsive column resets
    • +
  • Remove gutters
  • Offsetting columns
  • Nesting columns
  • Column ordering
    • diff --git a/less/grid.less b/less/grid.less index e100655b70..e94d659487 100644 --- a/less/grid.less +++ b/less/grid.less @@ -40,6 +40,16 @@ .make-row(); } +.row-no-gutters { + margin-right: 0; + margin-left: 0; + + [class*="col-"] { + padding-left: 0; + padding-right: 0; + } +} + // Columns //