Reduce the gutter (default 30px) on smaller devices in Bootstrap3?

Question

In bootstrap 3 the gutter is defined as 30px (15px on each side of a column). The issue I\'m running is that, for example if I shrink my screen down to be tiny, the gutters

Answer 1

I tried to rewrite Bootstrap mixin in order to have half of the normal grid-gutter for the XS width. Seems work fine.

.make-xs-column(@columns; @gutter: @grid-gutter-width) {   
    @media(max-width: @screen-xs-min) {
        padding-left:  (@gutter / 4);
        padding-right: (@gutter / 4);
    };
}
.make-row(@gutter: @grid-gutter-width) {
    @media(max-width: @screen-xs-min) {
        margin-left:  (@gutter / -4);
        margin-right: (@gutter / -4);
    }
}

.container-fixed() {
    @media(max-width: @screen-xs-min) {
        padding-left:  (@grid-gutter-width / 4);
        padding-right: (@grid-gutter-width / 4);
    }
}

Answer 2

The gutter is construct by a left and right padding, you could use media queries to change this depending on your screen size:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) 
{ 
    div[class^="col"]{padding-left:5px; padding-right:5px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) 
{   
    div[class^="col"]{padding-left:10px; padding-right:10px;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) 
{   
    /*default so you don't need this*/
    div[class^="col"]{padding-left:15px; padding-right:15px;}
}

Note see also this question: Bootstrap 3 Gutter Size. You should use this when you also want to change the 'visual' gutter on both side of the grid. In this case you will also have to set the padding of the .container class to your gutter size. b.e.

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) 
{   
    /*default so you don't need this*/
    div[class^="col"]{padding-left:85px; padding-right:85px;}
    .container{padding-left:85px; padding-right:85px;}
    .row {
    margin-left: 0;
    margin-right: 0;
    }
}

Answer 3

I use standard (30px) gutter size except on small devices where my gutter is 6px :

@media (max-width: $screen-sm-min - 1) {
    $grid-gutter-width: 6px; // redefining

    // also redefine $navbar-padding-horizontal in the scope because it depend on $grid-gutter-width
    $navbar-padding-horizontal: floor(($grid-gutter-width / 2));

    @import "../bootstrap/bootstrap/forms";
    @import "../bootstrap/bootstrap/grid";
    @import "../bootstrap/bootstrap/navbar";
}

Answer 4

A more robust solution, using bootstrap mixins:

@sm-gutter: 10px;
@md-gutter: 50px;
@lg-gutter: 100px;

.my-container {
  @media (min-width: @screen-sm-min) {
    width: @container-sm;
    .container-fixed(@gutter: @sm-gutter);
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
    .container-fixed(@gutter: @md-gutter);
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
    .container-fixed(@gutter: @lg-gutter);
  }
}

.my-row {
  @media (min-width: @screen-sm-min) {
    .make-row(@gutter: @sm-gutter);
  }
  @media (min-width: @screen-md-min) {
    .make-row(@gutter: @md-gutter);
  }
  @media (min-width: @screen-lg-min) {
    .make-row(@gutter: @lg-gutter);
  }
}

.my-4-col {
  @media (min-width: @screen-sm-min) {
    .make-sm-column(4, @sm-gutter);
  }
  @media (min-width: @screen-md-min) {
     .make-md-column(4, @md-gutter);
  }
  @media (min-width: @screen-lg-min) {
     .make-lg-column(4, @lg-gutter);
  }
}

Answer 5

Simple solution using the LESS mixin and "col" class:

.reduce-gutter(@size: 5px) {
    .row {
        .make-row(@size);
    }
    .row .col:first-child,
    .row .col:last-child { 
        padding-right: @size;
        padding-left: @size;
    }
}