1

fellow devs,

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??

This is what I can achieve on the former (12 col 24 gutters, 6 columns 18 gutters):

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 > .col,

        .row > [class*="col-"] {

            margin-right: map-get($dani-gutters, $breakpoint );

            margin-left: map-get($dani-gutters , $breakpoint );

        }

    }

}

}

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?

.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 > .foreground-col,

        .foreground-row > [class*="foreground-col"] {

            margin-right: map-get($dani-row-no-gutters, $breakpoint );

            margin-left: map-get($dani-row-no-gutters, $breakpoint );

        }

    }

}

}

.foreground-row {

    @include make-foreground-row();

    // @include make-col(12);

}



.foreground-col {

    @include make-col-ready();

    @include make-col(15);

}

for HTML,css

<div class="background-container">
  <div class="container">
    <div class="row">
      <div class="col">col1</div>
      <div class="col">col2</div>
      <div class="col">col3</div>
    </div>
  </div>
</div>

<div class="foreground-container">
  <div class="container">
    <div class="row">
      <div class="col">col1</div>
      <div class="col">col2</div>
      <div class="col">col3</div>
    </div>
  </div>
</div>

Is this even possible? If so how and if not what a good way to achieve what i intended to achieve?

Thanks.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
diehell
  • 739
  • 2
  • 9
  • 19

1 Answers1

1

You can make a custom mixin to regenerate the appropriate breakpoint columns inside the custom container...

@mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // only override lg and up
    @include media-breakpoint-up('lg', $breakpoints) {
      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          padding-right: ($gutter / 2);
          padding-left: ($gutter / 2);
          @include make-col($i, $columns);
        }
      }

    }
  }
}

@import "bootstrap";

$foreground-container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1428px
);

/* make the container for the custom grid */
.foreground-container > .container {
    @include make-container();
    @include make-container-max-widths($foreground-container-max-widths, $grid-breakpoints);
}

.foreground-container {
    /*  custom col for all breakpoints */
    @include make-grid-columns(6, 3px, $grid-breakpoints);

    /* override lg and up using custom mixin */
    @include make-grid-columns-custom(15, 6px, $grid-breakpoints);
}

Demo: https://www.codeply.com/go/SLmHas8zEZ

Related: Define different number of Bootstrap 4 columns for some part (div) of page only?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Wow this is good, not to nitpick, but i see that the gutter between the column still taking 15px left-right the default bootstrap gutter, while i see that you're specifying 6px grid gutter width. Does it not take effect? – diehell Sep 26 '18 at 16:11
  • Ya, you'll need to set `padding-` to `$gutter/2` in the custom mixin. I updated the answer and demo: https://www.codeply.com/go/SLmHas8zEZ – Carol Skelly Sep 26 '18 at 16:51
  • 1
    oh that made sense. It seems that my understanding of using SASS with bootstrap especially customizing it is severely lacking. Do you have any suggestion on readings to strengthen my knowledge? – diehell Sep 26 '18 at 17:03
  • Thanks, this [article I wrote](https://uxplanet.org/how-to-customize-bootstrap-b8078a011203) may help you to get started at least from a Bootstrap perspective and shows a few other SASS resources as well. – Carol Skelly Sep 26 '18 at 17:53