How to apply bootstrap classes to "li" items of Pagelist component in Sitecore SXA?

Question

I want to show my items in pagelist component horizontally in sets of 3. the default behaviour shows item in vertical list. So in order to show items horizontally, i need to apply bootstrap classes "col-xs-12 col-sm-4 col-md-4 col-lg-4" to "li" items. I tried adding classes through rendering variants and to pagelist component in exeperience editor, the classes are getting added to its parent div.

Answer 1

As far as I know it isn't possible to add those classes via html without cloning the component and modifying the view. However you can achieve the same result using bootstrap mixins and functions in SCSS, with the bootstrap .scss files imported into the theme directory. For example you can add the following to your theme/scss/variants/search-results directory:

@import "base/bootstrap/_functions";
@import "base/bootstrap/_variables";
@import "base/bootstrap/_mixins";
&.search-result-product {
    ul {
        @include make-row();
    }
    li {
        @include media-breakpoint-up(sm) {
            @include make-col(12);
        }
        @include media-breakpoint-up(md) {
            @include make-col(6);
        }
        @include media-breakpoint-up(lg) {
            @include make-col(3);
        }
        list-style: none;
        position: relative;
    }
}

Then add a rendering variant to the search results and set a css class of search-result-product.

More info about working with SXA themes in Creative Exchange here.