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

Solution 1:

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

Solution 2:

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

Solution 3:

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