My goal is to display a variable number of Bootstrap cards on an HTML page. The number of cards should depend on user data in the database, meaning that I need to create these cards dynamically with jQuery. One issue I encountered is that Bootstrap cards always fill the space from left to right, giving them equal width and height.
For example, if a user has 2 items, I want to create 2 cards with specific width and height, leaving the rest of the row blank or empty.
I have tried adjusting the default card width, as well as using max-width and min-width properties, but so far none of these solutions have worked for me.
<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 longer 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>
</div>
<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 card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
This is how Bootstrap 4 normally displays the cards:
[ [ card 1 ] [ card 2 ] ]
However, I am looking for this layout:
[ [card 1] [card 2] [leave blank all the way to the right ] ]
If you have any suggestions on how to achieve this layout, I would greatly appreciate it. Thank you!