How can I increase the number of cards per row using react-bootstrap <CardColumns> component?

109
March 21, 2021, at 11:20 AM

I am struggling a bit with how to format React-Bootstraps <CardColumns> component.

It appears no matter what size my cards are, they will only put 3/row but I am trying to get like 4/5 per row. I am just using the basic component with no extra css. How can I force it to put more cards there?

<CardColumns style={{padding:20}}>
        {featuredData1.map(function(featuredListing, i){
                    return <ListingCard key={i} listingData={featuredListing}/>
        })}

the <Listing Card> component is just my own using the <card> component.

Also - when I modify the number of cards to display, and it is not an even multiple of 3, it only puts 2 on the last two rows rather than just 3 on one row, and 1 on the other? How can I force it so that it does 3+1 rather than 2+2? I am trying to create a product listing page. Here is what I am talking about

trying to get 2 even rows of 3 and one row of 1

READ ALSO
ExpressJs &amp; PassportJs returning &#39;missing credentials&#39; on successful login

ExpressJs & PassportJs returning 'missing credentials' on successful login

I have been trying to solve this for hours, I made everything posts say and still not workingThere are another posts in stack overflow about this, but I simply can't find a solution for my code

157
Django using Celery not performing my task

Django using Celery not performing my task

I have been trying for the past 3 days to get django to perfom asynchronous tasks on a periodic scheduleCame across Celery which seemed like a perfect match for my problem but the more I read online the more problems there seemed to exist that I had prepared

130
Nextcloud: upload large files

Nextcloud: upload large files

I have a Nextcloud 18 on Apache/PHP 73, behind a reverse proxy (out of my control)

163