How to limit number of columns of card-deck?

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..

  <div class="row">
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          ... {repeat col-sm-3}..
  </div>

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)

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>

Add your cards under a section called card-deck and then use these css properties : Just an example. Edit the value as you want.

.card-deck{
    margin-top: 10px;
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: .5rem;
}

Reference1: https://www.w3schools.com/cssref/pr_grid-template-columns.asp Reference2:https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns