14

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>
VLAZ
  • 26,331
  • 9
  • 49
  • 67
Abdussami Tayyab
  • 143
  • 1
  • 1
  • 4

4 Answers4

23

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)

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Maybe you can help me. Look at this : https://stackoverflow.com/questions/52568601/how-can-i-add-link-in-the-card-deck-groups – moses toh Sep 29 '18 at 13:33
8
<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

Clin John Xavier
  • 81
  • 1
  • 1
  • This is the solution for me!! You can also add a custom styled component with these CSS settings and use it. For example, mine is This way when mapping an array of data you don't have to care about rows and columns! – Yanislav Tankov Dec 21 '21 at 13:25
0

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;
`;
Yanislav Tankov
  • 61
  • 1
  • 2
-2

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

ataravati
  • 8,891
  • 9
  • 57
  • 89
Jaroslaw Jankowiak
  • 40
  • 4