Tag: Bootstrap grid

HTML

<div class="row responsive-gutter">
    <div class="col-6 col-md-4">
    </div>
    <div class="col-6 col-md-4">
    </div>
    ...
</div>

CSS

.row.responsive-gutter {
    > .col,
    > [class*="col-"] {
        margin-bottom: $grid-gutter-width;
        &.last-row {
            margin-bottom: 0;
        }
    }
    // setting half the size for mobile
    @include media-breakpoint-down(md) {
        margin-right: -$grid-gutter-width / 4;
        margin-left: -$grid-gutter-width / 4;
        > .col,
        > [class*="col-"] {
            margin-bottom: $grid-gutter-width / 2;
            padding-right: $grid-gutter-width / 4;
            padding-left: $grid-gutter-width / 4;
        }
    }
}