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 end up being wider than the columns themselves, as seen below (darker blue = column, lighter blue = gutter).

Can you modify the gutter width of certain resolution states? (mobile, tablet, etc)

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