Row columns does not fill container

Question

I've one container with two rows inside. One of that rows has some columns. What I would like to do is have on mobile four columns per line. And that works fine with "row-cols-4". But for big screen, I would like to have all the columns on the same line, so I used "row-cols-md-auto" to do that. The problem is that the row does not fill the container as you can see in the image below:

I'm using Bootstrap v5.2 and this is a snippet of my code:

What can I do to fill the container on the desktop screen?

user2DI · Answer

The problem is that row-cols-md-auto will make the columns (buttons) shrink to the width of their content. Also Bootstrap doesn't offer a row-cols-md class to make the columns grow width on medium viewport size. Therefore, I don't think is possible using row-cols-*. Instead you could use a custom CSS class...

CSS...

@media (min-width: 768px) {
    .row-cols-md>.col {
        flex: 1 0 0%;
    }
}

markup...

OR

You can avoid the custom CSS and not use row-cols-*. Instead use the class grid sizes...

Demo: https://codeply.com/p/1B1abfyZ0q

Sumanstm21 · Answer

Check also for div and your container class.

<>
<>Your Code

Row columns does not fill container

2 Answers

OR