Row columns does not fill container-CodePudding

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:

<div >
    <div id="menu" >
        <button id="faq1"  href="#">FAQ1</button>
        <button id="faq2"  href="#">FAQ2</button>
        <button id="faq3"  href="#">FAQ3</button>
        <button id="faq4"  href="#">FAQ4</button>
        <button id="faq5"  href="#">FAQ5</button>
        <button id="faq6"  href="#">FAQ6</button>
        <button id="faq7"  href="#">FAQ7</button>
        <button id="faq8"  href="#">FAQ8</button>
    </div>
    <div id="viewer" >
        <div ></div>
    </div>
</div>

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

CodePudding user response：

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...

<div >
    <div id="menu" >
        <button id="faq1"  href="#">FAQ1</button>
        <button id="faq2"  href="#">FAQ2</button>
        <button id="faq3"  href="#">FAQ3</button>
        <button id="faq4"  href="#">FAQ4</button>
        <button id="faq5"  href="#">FAQ5</button>
        <button id="faq6"  href="#">FAQ6</button>
        <button id="faq7"  href="#">FAQ7</button>
        <button id="faq8"  href="#">FAQ8</button>
    </div>
    <div id="viewer" >
        <div ></div>
    </div>
</div>

OR

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

<div >
    <div id="menu" >
        <button id="faq1"  href="#">FAQ1</button>
        <button id="faq2"  href="#">FAQ2</button>
        <button id="faq3"  href="#">FAQ3</button>
        <button id="faq4"  href="#">FAQ4</button>
        <button id="faq5"  href="#">FAQ5</button>
        <button id="faq6"  href="#">FAQ6</button>
        <button id="faq7"  href="#">FAQ7</button>
        <button id="faq8"  href="#">FAQ8</button>
    </div>
</div>

Demo:

Check also for div and your container class.

<>
<>Your Code</>
</>