title: Bootstrap 3 change grid column count and gutter width on specific containers using SASS mixin
body: <p>I am trying to change the grid-column count and gutter-width within specific containers.</p>
  
  <p>The obvious and most fastest way would be to use a mixin in Bootstrap SASS.</p>
  
  <p>Is there not one mixin that handles all of this in one? I struggling to see one runs all the mixins in _grid.scss</p>
  
  <p>For example, I'm looking for something like this.</p>
  
  <pre><code>@mixin new-grid-system($grid-columns, $grid-gutter-width);
  </code></pre>
  
  <p>-</p>
  
  <pre><code>.gallery {
     @include new-grid-system('10', '10px');
  }
  
  .gforms {
     @include new-grid-system('9', '10px');
  }
  </code></pre>
  
  <p>If not, any one got any ideas?</p>
  
  <hr/>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After a little persistence , I worked it out and made my own...</p>
  
  <pre><code>@mixin new-grid-system($new-grid-columns, $new-grid-gutter-width) {
  
      $grid-columns: $new-grid-columns;
      $grid-gutter-width: $new-grid-gutter-width;  
  
      .row {
          @include make-row();
      }
  
      @include make-grid-columns();
      @include make-grid(xs);
      @media (min-width: $screen-sm-min) {
          @include make-grid(sm);
      }
      @media (min-width: $screen-md-min) {
          @include make-grid(md);
      }
      @media (min-width: $screen-lg-min) {
          @include make-grid(lg);
      }
  
  }
  </code></pre>
  
  <p>Just run like this...</p>
  
  <pre><code>.gallery {
     @include new-grid-system('10', '10px');
  }
  </code></pre>