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