How to customize bootstrap3 @grid-gutter-width for only .col-xs-

Question

I'd like to have thinner gutters when rendered on mobile devices. I found this in mixins.less to let me set @grid-gutter-width globally. But what's the best way to set a different gutter width for ONLY col-xs- (mobile devices) when the columns are all collapsed without breaking everything else?

// Grid System
// -----------

// Centered container element
.container-fixed() {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  .clearfix();
}

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  .clearfix();
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage((@columns / @grid-columns));
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

You're going to have to edit the XS mixins yourself to use a new, separate variable (instead of `@grid-gutter-width`). We're probably going to add per-grid-tier gutter width variables in Bootstrap v4. — cvrebert, Mar 19 '14 at 22:24

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

1

There is a good answer here that will solve this problem: Reduce the gutter (default 30px) on smaller devices in Bootstrap3? i.e.:

/* Extra-small devices (767px and below) */
@media (max-width: 767px) 
{ 
    div[class^="col-xs-"] {
        padding-left: 5px; 
        padding-right: 5px;
    }
}

Of course, you might to wrap that up in LESS.

edited May 23 '17 at 12:21

Community

1
1

answered Oct 10 '14 at 09:28

KevinD

1,769
10
25

score -3 · Answer 2 · edited May 30 '14 at 13:50

-3

If you want to change gutter size you must open the variable.less, and look for

@grid-gutter-width:
and change it to your desired value.

Tips: you can also change/edit number of columns, container width inside the variable.less.

edited May 30 '14 at 13:50

NG_

6,895
7
45
67

answered May 30 '14 at 13:33

ameil

1
1

that would change the grid gutter width globally, my question was for changing gutter width for ONLY col-xs- – michael Jun 05 '14 at 13:16

How to customize bootstrap3 @grid-gutter-width for only .col-xs-

2 Answers2