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).

enter image description here

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

score 26 · Answer 1 · edited May 23 '17 at 12:02

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

Can we use % on those padding changes, or will bootstrap 3 complain? — MEM, Jan 30 '14 at 17:10
If, like me, you don't use the attribute matching selectors too often and don't want to look them up, read on! I had pretty good success changing `[class^="col"]` (starts with "col") to `[class*="col"]` (attribute contains "col"). If you have more than one class on your element and `col-` isn't the first, the `*=` is what you'll need. — imjared, Oct 14 '14 at 13:15

score 6 · Answer 2 · answered Oct 15 '14 at 20:17

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

These are less mixins i guess? – ratata Jan 04 '15 at 14:48 — ratata, Jan 04 '15 at 14:48
@ratata: Yes, they're for Less. – damd Mar 08 '16 at 08:51 — damd, Mar 08 '16 at 08:51

score 4 · Answer 3 · answered Jun 05 '14 at 11:02

4

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

answered Jun 05 '14 at 11:02

jhvaras

2,005
21
16

This worked well for me. I don't know why someone downvoted it. – Johnny Oshika Jan 09 '15 at 06:22
2

`:last-child` is not supported by IE8 and this might be a problem. IE8 is generally supported by bootstrap but this solution would break the column flow. – Philipp Michael Jul 21 '15 at 06:55
If you have more than two columns in your layout this wil break. Lose the first-child & last-child. – Guido Bouman Feb 18 '16 at 13:45

score 1 · Answer 4 · answered May 27 '15 at 22:59

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

answered May 27 '15 at 22:59

Julien

703
1
10
17

This would be a nice approach, but I could not bring this to work. Can you provide me more information where to place your code, and why do I need to re-import some bootstrap files? Thanks. – g.breeze Feb 15 '16 at 09:28

score 0 · Answer 5 · answered Oct 13 '15 at 15:17

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

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

5 Answers5

Linked

Related