title: How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?
body: <p>fellow devs,</p>
  
  <p>I'm trying to get 12 columns and 24 gutter size on large size, while 6 columns and 18 gutters when it's medium and lower on one container view, while another container view it would be 15 columns and 12 gutters on the large size while resizing accordingly on lower views??</p>
  
  <p>This is what I can achieve on the former (12 col 24 gutters, 6 columns 18 gutters):</p>
  
  <pre><code>background-grid {
  
  @include make-row();
  
  @include make-col-ready;
  
  
  
  @each $breakpoint in map-keys($grid-breakpoints) {
  
      @include media-breakpoint-up($breakpoint) {
  
          //@include make-col(map-get($dani-number-col, $breakpoint ));
  
          .row.no-gutters {
  
              margin-right: map-get($dani-row-no-gutters, $breakpoint );
  
              margin-left: map-get($dani-row-no-gutters, $breakpoint );
  
          }         
  
          .row &gt; .col,
  
          .row &gt; [class*="col-"] {
  
              margin-right: map-get($dani-gutters, $breakpoint );
  
              margin-left: map-get($dani-gutters , $breakpoint );
  
          }
  
      }
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p>while I tried to do another container class to act for another view (15 columns, 6 gutters), I can't get my head around it. Mainly because my CSS and SASS understanding might be sparse, tried googling it but it seems there's no proper tutorial?</p>
  
  <pre><code>.foreground-container {
  
  width: 1428px;
  
  @include make-foreground-container();
  
  
  
  @each $breakpoint in map-keys($grid-breakpoints) {
  
      @include media-breakpoint-up($breakpoint) {
  
          //@include make-col(map-get($dani-number-col, $breakpoint ));
  
          // @include make-col(15);
  
          .foreground-row {
  
              margin-right: map-get($dani-row-no-gutters, $breakpoint );
  
              margin-left: map-get($dani-row-no-gutters, $breakpoint );
  
          }         
  
          .foreground-row &gt; .foreground-col,
  
          .foreground-row &gt; [class*="foreground-col"] {
  
              margin-right: map-get($dani-row-no-gutters, $breakpoint );
  
              margin-left: map-get($dani-row-no-gutters, $breakpoint );
  
          }
  
      }
  
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.foreground-row {
  
      @include make-foreground-row();
  
      // @include make-col(12);
  
  }
  
  
  
  .foreground-col {
  
      @include make-col-ready();
  
      @include make-col(15);
  
  }
  </code></pre>
  
  <p>for HTML,css</p>
  
  <pre><code>&lt;div class="background-container"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col"&gt;col1&lt;/div&gt;
        &lt;div class="col"&gt;col2&lt;/div&gt;
        &lt;div class="col"&gt;col3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="foreground-container"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col"&gt;col1&lt;/div&gt;
        &lt;div class="col"&gt;col2&lt;/div&gt;
        &lt;div class="col"&gt;col3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is this even possible? If so how and if not what a good way to achieve what i intended to achieve? </p>
  
  <p>Thanks.</p>