Can't display more than 6 columns using Bootstrap's row-cols

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?

Solution

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 %}