This is my code, what I want to achieve is only four columns in a row, and no more or less than that, but currently, the number of cards range from 1-10, they keep compressi
As explained in the docs, Card layouts (decks, groups and columns)...
"For the time being, these layout options are not yet responsive."
Therefor, you can't limit the cards per row in the card-deck. You could use grid columns instead, and flexbox if you need the cards to be equal height..
...
...
... {repeat col-sm-3}..
http://codeply.com/go/AP1MpYKY2H
As of Bootstrap 4 alpha 6: Flexbox is now the default so the extra CSS is no longer needed. Use h-100 to make the cards fill the height of the columns.
https://www.codeply.com/go/rHe6rq5L76 (updated demo for Bootstrap 4.1)