Search code examples
gridtwitter-bootstrap-3sassmixins

Bootstrap 3 change grid column count and gutter width on specific containers using SASS mixin


I am trying to change the grid-column count and gutter-width within specific containers.

The obvious and most fastest way would be to use a mixin in Bootstrap SASS.

Is there not one mixin that handles all of this in one? I struggling to see one runs all the mixins in _grid.scss

For example, I'm looking for something like this.

@mixin new-grid-system($grid-columns, $grid-gutter-width);

-

.gallery {
   @include new-grid-system('10', '10px');
}

.gforms {
   @include new-grid-system('9', '10px');
}

If not, any one got any ideas?


UPDATE

After a little persistence , I worked it out and made my own...

@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);
    }

}

Just run like this...

.gallery {
   @include new-grid-system('10', '10px');
}

Solution

  • Here is my solution:

    First set new vars (this is just for overal column setup, not for the specific changes) in vars.scss

    /************************************
    ***** column vars
    *************************************/
    
    $new-columns :                  12;
    $new-gutter-width :             40px;
    
    $grid-columns :                 $new-columns;
    $grid-gutter-width :            $new-gutter-width;
    


    Here is the mixin which I keep in mixins.scss

    @mixin column-adjust($column,$gutter) {
    
        // set custom variables for our grid structure
        $grid-columns: $column !global;
        $grid-gutter-width: $gutter !global;
    
        .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);
        }
    
        // reset global vars;
        $grid-columns: $new-columns !global;
        $grid-gutter-width: $new-gutter-width !global;
    
    }
    


    Make sure the order of the scss import is like this..

    @import 'vars';
    @import 'mixins';
    


    Mixin example use is like so...

    /************************************
    ***** grid changes
    *************************************/
    
    .grid {
        &.grid-10-across {
            @include column-adjust(10, $grid-gutter-width );
        }
        &.grid-24-across {
            @include column-adjust(24, $grid-gutter-width );
        }
    }
    
    .gutter-slim {
        &.gutter-slim-10 {
            @include column-adjust($new-columns, 10px );
        }
        &.gutter-slim-6 {
            @include column-adjust($new-columns, 6px );
        }
    }
    


    Hope this helps. Feel free to improve :-)