Strange columned display with InstantSearch and Bootstrap

I am using InstantSearch.js to show a series of resources. I had to use Algolia’s cssClasses to force Bootstrap’s cols to be added on the root ‘row.’

cssClasses: {
    root: 'row',
    item: 'col-sm-6 col-md-4 col-lg-4'
}

The data is showing how I would like it to (well, I’d actually prefer to use Semantic UI but that is proving to be far more difficult than I had envisioned… as an aside, does anyone know where I can find elaborate documentation on cssClasses?).

Either way, this is what it looks like:

If a user filters down to a single resource, the width of the resource card is mysteriously cut in half—like this:

Does anyone know why this is happening? Or, better yet, how I can fix this?

You’re close. CSSClasses needs to be a comma separated array:

cssClasses: {
    root: 'my-searchbox',
    input: ['searchbox-input', 'input', 'form-element'],
}

Docs:

Thanks for the reply.

The code provided in question (col-lg-4 col-md-4 col-sm-6) is Bootstrap’s grid system markup for responsive design and would be considered one element in an array.

Either way, I solved my problem. It was not an Algolia issue but rather a CSS issue elsewhere in my code. Thanks again! :slight_smile: