How to limit number of columns of card-deck?

Question

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 compressing until 10.

<div class="card-deck-wrapper">
    <div class="card-deck">
        @foreach($resource->projects as $project)
            <div class="card card-project">
                bla bla (every card let's say is like this)
            </div>
        @endforeach
    </div>
</div>

Answer 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

Answer 2

For typescript and component driven app, there is an elegant solution based on the suggested code of Clin John Xavier:

import { StyledCardDeck, } from "./style";
<StyledCardDeck>
  <StyledCard>
      ...// card content here
  </StyledCard>
</StyledCardDeck>

and then in your style.tsx:

export const StyledCardDeck = styled(({ ...rest }) => <CardDeck {...rest} 
/>)`
  margin-top: 10px;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 0.5rem;
`;

Answer 3

You can limit number of cards in one row with .cards-columns

<div class="card-columns">
    <div class="card-deck-wrapper">
         <div class="card-deck">
            @foreach($resource->projects as $project)
                <div class="card card-project">
                    bla bla (every card let's say is like this)
                </div>
            @endforeach
        </div>
    </div>
</div>

And in css:

.card-columns {
    @include media-breakpoint-only(lg) {
    column-count: 4;
}

More https://v4-alpha.getbootstrap.com/components/card/#decks