Tag: Bootstrap

Responsive Bootstrap gutter

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;
        }
    }
}

Bootstrap accordion scroll to opened item

$(".accordion .collapse").on('shown.bs.collapse', function(e){
    if($(".main-menu") != $(this)){
        // get clicked item
        $clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
        clickedElementOffsetTop = $clickedElement.offset().top;
        // add additional offset for top fixed elements
        headerOffset = $(".main-header-top").outerHeight();
        // check if element is outside viewport
        if(clickedElementOffsetTop - headerOffset < $(window).scrollTop()){
            $('html, body').animate({
                scrollTop: clickedElementOffsetTop - headerOffset
            }, 300);
        }
    }
});