Menu
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>
854
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.
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.
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.
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.
<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
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
