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