Bootstrap 4 card-deck with number of columns based on viewport

Question

I\'m trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height.

The examples that bootstrap provides show 4 nice cards, but it

Answer 1

It took me a bit to figure this out, but the answer is to not use a card-deck, but instead to use .row and .cols.

This makes a responsive set of cards with specifics for each screen size: 3 cards for xl, 2 for lg and md, and 1 for sm and xs. .my-3 puts a padding on top and bottom so they look nice.

mixin postList(stuff)
  .row
    - site.posts.each(function(post, index){
      .col-sm-12.col-md-6.col-lg-6.col-xl-4
        .card.my-3
          img.card-img-top(src="...",  alt="Card image cap")
          .card-body
            h5.card-title Card title #{index}
            p.card-text Some quick example text to build on the card title and make up the bulk of the cards content.
            a.btn.btn-primary(href="#") Go somewhere
    - })