Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to limit number of columns of card-deck?

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>
like image 854
Abdussami Tayyab Avatar asked Aug 11 '16 11:08

Abdussami Tayyab


People also ask

How do you adjust the width of a card?

To set the width of something, you can use the width property: width: 500px; width: 50%; width: 50vw; There are different units you can use, such as px (pixels) % (percentage of page width) and vw (percentage of window width). There may also be others, but those are the ones I know of.

How do you make a responsive card deck?

Another way to make a responsive card-deck, is using responsive reset divs every x columns. This will force cards to wrap at specific breakpoints. For example: 5 on xl, 4 on lg, 3 on md, 2 on sm, etc.. The link to the responsive cards using grid doesn't quite work.

How do I align card side by side?

Make the card and the inner container flex-columns, then tell the container to xpand as much as possible with flex:1 . Then push the h4 to the bottom of the container with margin-top:auto . Save this answer.

How do I sort bootstrap cards?

Sorting Data An end-user can sort the Card View by clicking the header of a column by which data should be sorted. An arrow glyph indicates the sort order within the sorted column. The Card View can be sorted against multiple columns by clicking the required column headers while holding down the shift key.


1 Answers

<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

like image 117
Clin John Xavier Avatar answered Nov 10 '22 18:11

Clin John Xavier