Bootstrap Grid Mixin Overriding Previous Declarations

Question

I'm using Bootstrap 3.3.7s Less mixins for their grid system, found here.

My basic concept is to increase gutter size as my screen size increases. Here is an example of my html:

<div class="container">
  <div class="row-intro">
    <div class="col-intro-content">
      <p>Sugar grounds half and half, percolator that, crema ut cup dark ristretto lungo. Carajillo bar steamed, milk spoon to go, wings qui caramelization beans that.</p>
    </div>
  </div>
</div>

And less:

.row-intro {
  .make-row(40px);
    .col-intro-content {
      .make-xs-column(12, 40px);
      .make-md-column(10, 60px);
      .make-md-column-offset(1);
    }
}

Now what happens is that even on the xs screen sizes, I have a gutter size of 60px, regardless of declaring it 40px earlier. Any idea as to why this is getting overridden? I've tried it without the offset and the issue remains. I've tried different gutter widths and the same relative issue still exists.

Answer 1

That is because you are missing

 .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";

you need the .make-sm as well

info