@import "bootstrap/scss/vendor/rfs"; @import 'bootstrap/scss/mixins/grid'; $container-max-widths: ( md: 500px, lg: 1000px, xl: 1140px, xxl: 1320px ); $grid-breakpoints: ( xs: 0, sm: 520px, md: 760px, lg: 940px, xl: 1200px, xxl: 1400px ); @for $i from 1 through 10 { .col10-#{$i} { @include make-col($i, 10); } } @mixin media-1000px{ @media (min-width: map-get($grid-breakpoints, 'lg')) { @content; } @for $i from 1 through 10 { .col10d-#{$i} { @include make-col($i, 10); } } } @mixin media-500px{ @media (max-width: calc(map-get($grid-breakpoints, 'lg') - .02px)) { @content; } }