I am creating an auction website. I want to show the listings as cards in columns. So far I managed to display a different number of cards on different screen sizes. However, somehow I can't manage to show more than 6 cards/columns next to each other. I want to show 8 in xxl screen-size Here is my code:
<!-- Grid for cards --><div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 **row-cols-xxl-8** g-2 mb-2"><!-- Card for every listing -->{% for listing in all_listings %}<div class="col"><div class="card h-100 shadow-sm">{% if listing.image_url %}<img src="{{ listing.image_url }}" alt="Listing image" class="card-img-top mx-auto"></a>{% else %}<img src="https://lh3.googleusercontent.com/EbXw8rOdYxOGdXEFjgNP8lh-YAuUxwhOAe2jhrz3sgqvPeMac6a6tHvT35V6YMbyNvkZL4R_a2hcYBrtfUhLvhf-N2X3OB9cvH4uMw=w1064-v0"alt="Listing image" class="card-img-top mx-auto"></a>{% endif %}<div class="card-body d-flex flex-column"><a href="#" class="mp-link stretched-link"><h6>{{ listing.title|truncatechars:50 }}</h6></a><h6 class="mp-darkblue">€{{ listing.starting_bid|floatformat:2 }}</h6><p class="card-text">{{ listing.description|truncatechars:100}}</p></div></div></div>{% endfor %}</div>I have already tried a number of things:
- Without images in the cards, the issue remains
- Resizing images doesn't work
- Using no cards at all, so just plain text, gives the same issue
- The container that this grid of cards is nested in is wide enough (100% screenwidth with a padding of 4)
I also just read this post, but that doesn't offer me a solution as I use CDN (I think?). So it seems that Bootstrap maybe just doesn't support this? How do I overwrite that?
Best Answer
In Bootstrap 5, the 'row-cols-xxl-*' class is not available by default. You can create a custom class to handle the xxl screen size.
Add the following CSS code to your custom CSS file or inside a '' tag in your HTML file:
@media (min-width: 1400px) {.row-cols-xxl-8 > * {flex: 0 0 auto;width: 12.5%;}}
This custom media query will apply the rule for screens with a minimum width of 1400px (which you can adjust according to your needs). It sets the width of the columns to 12.5% (100% / 8) when the screen size is xxl or larger.
Now, update your HTML code to include the custom class row-cols-xxl-8:
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-8 g-2 mb-2"><!-- Card for every listing -->{% for listing in all_listings %}<div class="col"><!-- ... --></div>{% endfor %}