Homehtml – Bootstrap 5+ carousel with cards based on view port (screen size)

html – Bootstrap 5+ carousel with cards based on view port (screen size)

I have been searching for this for a long time but unfortunately all the questions / answers are mostly 6/8 years old. Now that Bootstrap has come a long way, I want to ask a question because maybe someone knows how to do it.

I need a carousel of cards that is compatible based on the viewport, for example:

  • Default size: 3 items
  • Mobile size: only 1 item

This piece is perfect for my needs: https://gosnippets.com/snippets/bootstrap-carousel-with-cards-in-3-columns, however I failed to get what I wanted.

I’ve also played with Slick Carousel, but to be honest I’m not a fan. It does exactly what I need it to do but it’s old, buggy and I’d be happy to use only Bootstrap.

My project uses Webpack so I am able to use SCSS if it helps.

Please let me know if it is possible to get what I want with just a simple Bootstrap 5.