Bootstrap Grid System Elements Queries

gistfile1.txt

@import "~bootstrap/scss/mixins";

/**
    CSS Elements Queries (https://github.com/marcj/css-element-queries) support for Bootstrap's Grid System.
    Just add the class name ".element-query" to the parent element.
*/

@mixin make-grid-columns-eq(
    $columns: $grid-columns,
    $gutter: $grid-gutter-width,
    $breakpoints: $grid-breakpoints
) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @for $i from 1 through $columns {
            .col#{$infix}-#{$i} {
                flex: initial;
                max-width: initial;
            }
        }

        &[min-width~="#{breakpoint-min($breakpoint, $breakpoints)}"] {
            @for $i from 1 through $columns {
                .col#{$infix}-#{$i} {
                    @include make-col($i, $columns);
                }
            }
        }
    }
}

.element-query {
    @include make-grid-columns-eq();
}